add tabs

src/components/UI/downloads/DownloadsTable.tsx

@@ -0,0 +1,113 @@
+import {
+  Stack,
+  Tabs,
+  TabList,
+  Tab,
+  Text,
+} from '@chakra-ui/react';
+
+export const DownloadsTable = () => {
+  return (
+    <Stack sx={{ mt: '0 !important' }} borderBottom='2px solid #11866f'>
+      <Tabs variant='unstyled'>
+        <TabList
+          color='#11866f'
+          bg='#d7f5ef'
+          borderBottom='2px solid #11866f'
+        >
+          <Tab
+            w={'20%'}
+            p={4}
+            _selected={{
+              bg: '#11866f',
+              color: '#f0f2e2',
+            }}
+          >
+            <Text
+              fontFamily='"JetBrains Mono", monospace'
+              // TODO: move to theme colors
+              fontWeight={700}
+              textTransform='uppercase'
+              textAlign='center'
+            >
+              LINUX
+            </Text>
+          </Tab>
+          <Tab
+            w={'20%'}
+            p={4}
+            _selected={{
+              bg: '#11866f',
+              color: '#f0f2e2',
+            }}
+          >
+            <Text
+              fontFamily='"JetBrains Mono", monospace'
+              // TODO: move to theme colors
+              fontWeight={700}
+              textTransform='uppercase'
+              textAlign='center'
+            >
+              MACOS
+            </Text>
+          </Tab>
+          <Tab
+            w={'20%'}
+            p={4}
+            _selected={{
+              bg: '#11866f',
+              color: '#f0f2e2',
+            }}
+          >
+            <Text
+              fontFamily='"JetBrains Mono", monospace'
+              // TODO: move to theme colors
+              fontWeight={700}
+              textTransform='uppercase'
+              textAlign='center'
+            >
+              WINDOWS
+            </Text>
+          </Tab>
+          <Tab
+            w={'20%'}
+            p={4}
+            _selected={{
+              bg: '#11866f',
+              color: '#f0f2e2',
+            }}
+          >
+            <Text
+              fontFamily='"JetBrains Mono", monospace'
+              // TODO: move to theme colors
+              fontWeight={700}
+              textTransform='uppercase'
+              textAlign='center'
+            >
+              IOS
+            </Text>
+          </Tab>
+          <Tab
+            w={'20%'}
+            p={4}
+            _selected={{
+              bg: '#11866f',
+              color: '#f0f2e2',
+            }}
+          >
+            <Text
+              fontFamily='"JetBrains Mono", monospace'
+              // TODO: move to theme colors
+              fontWeight={700}
+              textTransform='uppercase'
+              textAlign='center'
+            >
+              ANDROID
+            </Text>
+          </Tab>
+        </TabList>
+      </Tabs>
+      <Text>Test</Text>
+    </Stack>
+  )
+}

src/components/UI/downloads/index.ts

@@ -1,2 +1,3 @@
 export * from './DownloadsHero';
 export * from './DownloadsSection'
+export * from './DownloadsTable'

src/pages/downloads.tsx

@@ -12,7 +12,11 @@ import {
 } from '@chakra-ui/react';
 import type { NextPage } from 'next';
 
-import { DownloadsHero, DownloadsSection } from '../components/UI/downloads';
+import {
+  DownloadsHero,
+  DownloadsSection,
+  DownloadsTable,
+} from '../components/UI/downloads';
 
 import {
   GETH_REPO_URL
@@ -107,9 +111,7 @@ const DownloadsPage: NextPage = ({}) => {
             </Text>
           </Stack>
 
-          <Stack p={4} borderBottom='2px solid #11866f'>
-            <Text>TABLE</Text>
-          </Stack>
+          <DownloadsTable />
 
           <Stack sx={{ mt: '0 !important' }}>
             <Button
@@ -160,9 +162,7 @@ const DownloadsPage: NextPage = ({}) => {
             </Text>
           </Stack>
 
-          <Stack p={4} borderBottom='2px solid #11866f'>
-            <Text>TABLE</Text>
-          </Stack>
+          <DownloadsTable />
 
           <Stack sx={{ mt: '0 !important' }}>
             <Button