add test data and table styles

src/components/UI/DataTable.tsx

@@ -5,20 +5,39 @@ import {
   Th,
   TableContainer,
   Text,
+  Tbody,
+  Td,
 } from '@chakra-ui/react';
 import { FC } from 'react';
 
 interface Props {
   columnHeaders: string[]
+  data: any
 }
 
 export const DataTable: FC<Props> = ({
-  columnHeaders
+  columnHeaders,
+  data,
 }) => {
   return (
-    <TableContainer>
+    <TableContainer
-      <Table variant='unstyled'>
+      css={{
-        <Thead>
+        "&::-webkit-scrollbar": {
+          background: "#d7f5ef",
+          borderTop: '2px solid #11866f',
+          height: 18
+        },
+        "&::-webkit-scrollbar-thumb": {
+          background: "#11866f",
+        },
+      }}
+      p={4}
+    >
+      <Table
+        variant='unstyled'
+      >
+        <Thead
+        >
           <Tr>
             {
               columnHeaders.map((columnHeader, idx) => {
@@ -43,6 +62,30 @@ export const DataTable: FC<Props> = ({
             }
           </Tr>
         </Thead>
+        <Tbody>
+          {
+            data.map((item: any, idx: number) => {
+              return (
+                <Tr
+                  key={idx}
+                >
+                  {
+                    columnHeaders.map((columnHeader, idx) => {
+                      return (
+                        <Td
+                          key={idx}
+                          px={0}
+                        >
+                          {item[columnHeader.toLowerCase()]}
+                        </Td>
+                      )
+                    })
+                  }
+                </Tr>
+              )
+            })
+          }
+        </Tbody>
       </Table>
     </TableContainer>
   )

src/components/UI/downloads/DownloadsTable.tsx

@@ -10,6 +10,8 @@ import {
 
 import { DataTable } from '../DataTable'
 
+import { testDownloadData } from '../../../data/test/download-testdata'
+
 export const DownloadsTable = () => {
   return (
     <Stack sx={{ mt: '0 !important' }} borderBottom='2px solid #11866f'>
@@ -120,59 +122,69 @@ export const DownloadsTable = () => {
           </Tab>
         </TabList>
         <TabPanels>
-          <TabPanel>
+          <TabPanel p={0}>
             <DataTable
               columnHeaders={[
                 'Release',
                 'Commit',
                 'Kind',
                 'Arch',
-                'Size'
+                'Size',
+                'Published'
               ]}
+              data={testDownloadData}
             />
           </TabPanel>
-          <TabPanel>
+          <TabPanel p={0}>
             <DataTable
               columnHeaders={[
                 'Release',
                 'Commit',
                 'Kind',
                 'Arch',
-                'Size'
+                'Size',
+                'Published'
               ]}
+              data={testDownloadData}
             />
           </TabPanel>
-          <TabPanel>
+          <TabPanel p={0}>
             <DataTable
               columnHeaders={[
                 'Release',
                 'Commit',
                 'Kind',
                 'Arch',
-                'Size'
+                'Size',
+                'Published'
               ]}
+              data={testDownloadData}
             />
           </TabPanel>
-          <TabPanel>
+          <TabPanel p={0}>
             <DataTable
               columnHeaders={[
                 'Release',
                 'Commit',
                 'Kind',
                 'Arch',
-                'Size'
+                'Size',
+                'Published'
               ]}
+              data={testDownloadData}
             />
           </TabPanel>
-          <TabPanel>
+          <TabPanel p={0}>
             <DataTable
               columnHeaders={[
                 'Release',
                 'Commit',
                 'Kind',
                 'Arch',
-                'Size'
+                'Size',
+                'Published'
               ]}
+              data={testDownloadData}
             />
           </TabPanel>
         </TabPanels>

src/data/test/download-testdata.ts

@@ -0,0 +1,98 @@
+export const testDownloadData = [
+  {
+    release: 'Geth 1.10.23',
+    commit: 'd901d853…',
+    kind: 'archive',
+    arch: '64-bit',
+    size: '11.71 MB',
+    published: 'Last Wednesday at 11:11 AM'
+  },
+  {
+    release: 'Geth 1.10.23',
+    commit: 'd901d853…',
+    kind: 'archive',
+    arch: '64-bit',
+    size: '11.71 MB',
+    published: 'Last Wednesday at 11:11 AM'
+  },
+  {
+    release: 'Geth 1.10.23',
+    commit: 'd901d853…',
+    kind: 'archive',
+    arch: '64-bit',
+    size: '11.71 MB',
+    published: 'Last Wednesday at 11:11 AM'
+  },
+  {
+    release: 'Geth 1.10.23',
+    commit: 'd901d853…',
+    kind: 'archive',
+    arch: '64-bit',
+    size: '11.71 MB',
+    published: 'Last Wednesday at 11:11 AM'
+  },
+  {
+    release: 'Geth 1.10.23',
+    commit: 'd901d853…',
+    kind: 'archive',
+    arch: '64-bit',
+    size: '11.71 MB',
+    published: 'Last Wednesday at 11:11 AM'
+  },
+  {
+    release: 'Geth 1.10.23',
+    commit: 'd901d853…',
+    kind: 'archive',
+    arch: '64-bit',
+    size: '11.71 MB',
+    published: 'Last Wednesday at 11:11 AM'
+  },
+  {
+    release: 'Geth 1.10.23',
+    commit: 'd901d853…',
+    kind: 'archive',
+    arch: '64-bit',
+    size: '11.71 MB',
+    published: 'Last Wednesday at 11:11 AM'
+  },
+  {
+    release: 'Geth 1.10.23',
+    commit: 'd901d853…',
+    kind: 'archive',
+    arch: '64-bit',
+    size: '11.71 MB',
+    published: 'Last Wednesday at 11:11 AM'
+  },
+  {
+    release: 'Geth 1.10.23',
+    commit: 'd901d853…',
+    kind: 'archive',
+    arch: '64-bit',
+    size: '11.71 MB',
+    published: 'Last Wednesday at 11:11 AM'
+  },
+  {
+    release: 'Geth 1.10.23',
+    commit: 'd901d853…',
+    kind: 'archive',
+    arch: '64-bit',
+    size: '11.71 MB',
+    published: 'Last Wednesday at 11:11 AM'
+  },
+  {
+    release: 'Geth 1.10.23',
+    commit: 'd901d853…',
+    kind: 'archive',
+    arch: '64-bit',
+    size: '11.71 MB',
+    published: 'Last Wednesday at 11:11 AM'
+  },
+  {
+    release: 'Geth 1.10.23',
+    commit: 'd901d853…',
+    kind: 'archive',
+    arch: '64-bit',
+    size: '11.71 MB',
+    published: 'Last Wednesday at 11:11 AM'
+  },
+]

src/pages/downloads.tsx

@@ -4,9 +4,6 @@ import {
   Link,
   ListItem,
   Stack,
-  Table,
-  Th,
-  Tr,
   Text,
   UnorderedList,
 } from '@chakra-ui/react';
@@ -200,7 +197,7 @@ const DownloadsPage: NextPage = ({}) => {
             </Text>
           </Stack>
 
-          <Stack p={4}>
+          {/* <Stack p={4}>
             <DataTable
               columnHeaders={[
                 'Build Server',
@@ -209,7 +206,7 @@ const DownloadsPage: NextPage = ({}) => {
                 'Fingerprint'
               ]}
             />
-          </Stack>
+          </Stack> */}
         </DownloadsSection>
 
         <DownloadsSection sectionTitle='Importing keys and verifying builds'>