chore: lab update (#2890)

apps/laboratory/src/components/ConfigurationList.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable no-negated-condition */
+import {
+  Box,
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  Heading,
+  Link,
+  Stack,
+  StackDivider,
+  Text
+} from '@chakra-ui/react'
+import type { SdkOption } from '../utils/DataUtil'
+import { IoArrowForward } from 'react-icons/io5'
+import type { ReactNode } from 'react'
+import { RandomLink } from './RandomLink'
+
+type Props = {
+  title: ReactNode
+  sdkOptions: SdkOption[]
+}
+
+export function ConfigurationList({ title, sdkOptions }: Props) {
+  return (
+    <>
+      <Card marginTop={10} marginBottom={10}>
+        <CardHeader>
+          <Heading size="md">{title}</Heading>
+        </CardHeader>
+        <CardBody>
+          <Stack divider={<StackDivider />} spacing="4">
+            {sdkOptions.map(option => (
+              <Box key={option.link + option.title}>
+                <Stack direction="row" justifyContent="space-between" alignItems="center">
+                  <Box>
+                    <Heading size="xs" textTransform="uppercase">
+                      {option.title}
+                    </Heading>
+                    <Text pt="2" fontSize="sm">
+                      {option.description}
+                    </Text>
+                  </Box>
+                  {option.randomLinks !== undefined && option.randomLinks.length > 0 ? (
+                    <RandomLink hrefs={option.randomLinks}>
+                      <Button rightIcon={<IoArrowForward />}>Go</Button>
+                    </RandomLink>
+                  ) : (
+                    <Link href={option.link}>
+                      <Button rightIcon={<IoArrowForward />}>Go</Button>
+                    </Link>
+                  )}
+                </Stack>
+              </Box>
+            ))}
+          </Stack>
+        </CardBody>
+      </Card>
+    </>
+  )
+}

apps/laboratory/src/layout/LayoutHeader.tsx

@@ -17,6 +17,7 @@ import { DownloadIcon } from '@chakra-ui/icons'
 import { useChakraToast } from '../components/Toast'
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
+import { DOCS_URL, GALLERY_URL, REPO_URL } from '../utils/ConstantsUtil'
 
 function downloadLogs(toast: ReturnType<typeof useChakraToast>) {
   type WindowWithLogs = typeof Window & {
@@ -57,13 +58,13 @@ export function LayoutHeader() {
         <Spacer />
 
         <HStack spacing={5} marginRight={[0, 0, 5]} marginTop={[3, 3, 0]} marginBottom={[3, 3, 0]}>
-          <CLink isExternal href="https://github.com/WalletConnect/web3modal">
+          <CLink isExternal href={REPO_URL}>
             GitHub
           </CLink>
-          <CLink isExternal href="https://gallery.appkit.com">
+          <CLink isExternal href={GALLERY_URL}>
             Gallery
           </CLink>
-          <CLink isExternal href="https://docs.reown.com/appkit/about">
+          <CLink isExternal href={DOCS_URL}>
             Docs
           </CLink>
         </HStack>