From 5153ea7f073eea4c8593df197c2ecd4124786161 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Fri, 7 Oct 2022 14:37:13 -0600
Subject: [PATCH] add DataTable component

---
 src/components/UI/DataTable.tsx               |  49 ++++++
 .../UI/downloads/DownloadsTable.tsx           | 140 +++++++-----------
 src/pages/downloads.tsx                       |  33 ++---
 3 files changed, 113 insertions(+), 109 deletions(-)
 create mode 100644 src/components/UI/DataTable.tsx

diff --git a/src/components/UI/DataTable.tsx b/src/components/UI/DataTable.tsx
new file mode 100644
index 0000000000..f186b50afa
--- /dev/null
+++ b/src/components/UI/DataTable.tsx
@@ -0,0 +1,49 @@
+import {
+  Table,
+  Thead,
+  Tr,
+  Th,
+  TableContainer,
+  Text,
+} from '@chakra-ui/react';
+import { FC } from 'react';
+
+interface Props {
+  columnHeaders: string[]
+}
+
+export const DataTable: FC<Props> = ({
+  columnHeaders
+}) => {
+  return (
+    <TableContainer>
+      <Table variant='unstyled'>
+        <Thead>
+          <Tr>
+            {
+              columnHeaders.map((columnHeader, idx) => {
+                return (
+                  <Th
+                    key={idx}
+                    textTransform='none'
+                    p={0}
+                    minW={'130.5px'}
+                  >
+                    <Text
+                      fontFamily='"JetBrains Mono", monospace'
+                      fontWeight={700}
+                      fontSize='md'
+                      color='#868b87'
+                    >
+                      {columnHeader}
+                    </Text>
+                  </Th>
+                )
+              })
+            }
+          </Tr>
+        </Thead>
+      </Table>
+    </TableContainer>
+  )
+}
\ No newline at end of file
diff --git a/src/components/UI/downloads/DownloadsTable.tsx b/src/components/UI/downloads/DownloadsTable.tsx
index d621574e15..9da3cdce9a 100644
--- a/src/components/UI/downloads/DownloadsTable.tsx
+++ b/src/components/UI/downloads/DownloadsTable.tsx
@@ -3,18 +3,13 @@ import {
   Tabs,
   TabList,
   Tab,
-  Table,
-  Tbody,
-  Thead,
-  Tr,
-  Th,
-  Td,
-  TableContainer,
   Text,
   TabPanel,
   TabPanels,
 } from '@chakra-ui/react';
 
+import { DataTable } from '../DataTable'
+
 export const DownloadsTable = () => {
   return (
     <Stack sx={{ mt: '0 !important' }} borderBottom='2px solid #11866f'>
@@ -126,84 +121,59 @@ export const DownloadsTable = () => {
         </TabList>
         <TabPanels>
           <TabPanel>
-            <TableContainer>
-              <Table variant='unstyled'>
-                <Thead>
-                  <Tr>
-                    <Th
-                      textTransform='none'
-                      p={0}
-                      minW={'130.5px'}
-                    >
-                      <Text
-                        fontFamily='"JetBrains Mono", monospace'
-                        fontWeight={700}
-                        fontSize='md'
-                        color='#868b87'
-                      >
-                        Release
-                      </Text>
-                    </Th>
-                    <Th
-                      textTransform='none'
-                      p={0}
-                      minW={'130.5px'}
-                    >
-                      <Text
-                        fontFamily='"JetBrains Mono", monospace'
-                        fontWeight={700}
-                        fontSize='md'
-                        color='#868b87'
-                      >
-                        Commit
-                      </Text>
-                    </Th>
-                    <Th
-                      textTransform='none'
-                      p={0}
-                      minW={'130.5px'}
-                    >
-                      <Text
-                        fontFamily='"JetBrains Mono", monospace'
-                        fontWeight={700}
-                        fontSize='md'
-                        color='#868b87'
-                      >
-                        Kind
-                      </Text>
-                    </Th>
-                    <Th
-                      textTransform='none'
-                      p={0}
-                      minW={'130.5px'}
-                    >
-                      <Text
-                        fontFamily='"JetBrains Mono", monospace'
-                        fontWeight={700}
-                        fontSize='md'
-                        color='#868b87'
-                      >
-                        Arch
-                      </Text>
-                    </Th>
-                    <Th
-                      textTransform='none'
-                      p={0}
-                      minW={'130.5px'}
-                    >
-                      <Text
-                        fontFamily='"JetBrains Mono", monospace'
-                        fontWeight={700}
-                        fontSize='md'
-                        color='#868b87'
-                      >
-                        Size
-                      </Text>
-                    </Th>
-                  </Tr>
-                </Thead>
-              </Table>
-            </TableContainer>
+            <DataTable
+              columnHeaders={[
+                'Release',
+                'Commit',
+                'Kind',
+                'Arch',
+                'Size'
+              ]}
+            />
+          </TabPanel>
+          <TabPanel>
+            <DataTable
+              columnHeaders={[
+                'Release',
+                'Commit',
+                'Kind',
+                'Arch',
+                'Size'
+              ]}
+            />
+          </TabPanel>
+          <TabPanel>
+            <DataTable
+              columnHeaders={[
+                'Release',
+                'Commit',
+                'Kind',
+                'Arch',
+                'Size'
+              ]}
+            />
+          </TabPanel>
+          <TabPanel>
+            <DataTable
+              columnHeaders={[
+                'Release',
+                'Commit',
+                'Kind',
+                'Arch',
+                'Size'
+              ]}
+            />
+          </TabPanel>
+          <TabPanel>
+            <DataTable
+              columnHeaders={[
+                'Release',
+                'Commit',
+                'Kind',
+                'Arch',
+                'Size'
+              ]}
+            />
           </TabPanel>
         </TabPanels>
       </Tabs>
diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx
index 2669eee1da..d5066fdae1 100644
--- a/src/pages/downloads.tsx
+++ b/src/pages/downloads.tsx
@@ -17,6 +17,7 @@ import {
   DownloadsSection,
   DownloadsTable,
 } from '../components/UI/downloads';
+import { DataTable } from '../components/UI/DataTable';
 
 import {
   GETH_REPO_URL
@@ -200,30 +201,14 @@ const DownloadsPage: NextPage = ({}) => {
           </Stack>
 
           <Stack p={4}>
-            <Table>
-              <Tr>
-                <Th>
-                  <Text fontFamily='"Inter", sans-serif' lineHeight='26px' color="#8F8F8F">
-                    Build Server
-                  </Text>
-                </Th>
-                <Th>
-                  <Text fontFamily='"Inter", sans-serif' lineHeight='26px' color="#8F8F8F">
-                    UniqueID
-                  </Text>
-                </Th>
-                <Th>
-                  <Text fontFamily='"Inter", sans-serif' lineHeight='26px' color="#8F8F8F">
-                    OpenPGP Key
-                  </Text>
-                </Th>
-                <Th>
-                  <Text fontFamily='"Inter", sans-serif' lineHeight='26px' color="#8F8F8F">
-                    Fingerprint
-                  </Text>
-                </Th>
-              </Tr>
-            </Table>
+            <DataTable
+              columnHeaders={[
+                'Build Server',
+                'UniqueID',
+                'OpenPGP Key',
+                'Fingerprint'
+              ]}
+            />
           </Stack>
         </DownloadsSection>