add test data and table styles

This commit is contained in:
Corwin Smith 2022-10-07 18:37:57 -06:00
parent 5153ea7f07
commit ac622c103d
4 changed files with 169 additions and 19 deletions

View File

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

View File

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

View File

@ -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'
},
]

View File

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