add DataTable component

This commit is contained in:
Corwin Smith 2022-10-07 14:37:13 -06:00
parent 8830faa9ca
commit 5153ea7f07
3 changed files with 113 additions and 109 deletions

View File

@ -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>
)
}

View File

@ -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>

View File

@ -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>