From ac622c103d73c880397e6ce65524d3dd3a1da123 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Fri, 7 Oct 2022 18:37:57 -0600
Subject: [PATCH] add test data and table styles

---
 src/components/UI/DataTable.tsx               | 51 +++++++++-
 .../UI/downloads/DownloadsTable.tsx           | 32 ++++--
 src/data/test/download-testdata.ts            | 98 +++++++++++++++++++
 src/pages/downloads.tsx                       |  7 +-
 4 files changed, 169 insertions(+), 19 deletions(-)
 create mode 100644 src/data/test/download-testdata.ts

diff --git a/src/components/UI/DataTable.tsx b/src/components/UI/DataTable.tsx
index f186b50afa..6f0e5f3dfd 100644
--- a/src/components/UI/DataTable.tsx
+++ b/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>
-      <Table variant='unstyled'>
-        <Thead>
+    <TableContainer
+      css={{
+        "&::-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>
   )
diff --git a/src/components/UI/downloads/DownloadsTable.tsx b/src/components/UI/downloads/DownloadsTable.tsx
index 9da3cdce9a..38ba2a7cd5 100644
--- a/src/components/UI/downloads/DownloadsTable.tsx
+++ b/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>
diff --git a/src/data/test/download-testdata.ts b/src/data/test/download-testdata.ts
new file mode 100644
index 0000000000..9ea4f97066
--- /dev/null
+++ b/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'
+  },
+]
\ No newline at end of file
diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx
index d5066fdae1..db6f09d421 100644
--- a/src/pages/downloads.tsx
+++ b/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'>