add pagination to builds

This commit is contained in:
Corwin Smith 2022-10-08 14:53:07 -06:00
parent 468c17d90b
commit d4fff5d11d

View file

@ -7,6 +7,7 @@ import {
UnorderedList, UnorderedList,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import type { NextPage } from 'next'; import type { NextPage } from 'next';
import { useState } from 'react'
import { import {
DownloadsHero, DownloadsHero,
@ -23,6 +24,9 @@ import { testDownloadData } from '../data/test/download-testdata'
const DownloadsPage: NextPage = ({}) => { const DownloadsPage: NextPage = ({}) => {
const [amountStableReleases, updateAmountStables] = useState(10)
const [amountDevelopBuilds, updateAmountDevelopBuilds] = useState(10)
return ( return (
<> <>
{/* TODO: add PageMetadata */} {/* TODO: add PageMetadata */}
@ -97,10 +101,12 @@ const DownloadsPage: NextPage = ({}) => {
</Stack> </Stack>
{/* TODO: swap test data for real data */} {/* TODO: swap test data for real data */}
<DownloadsTable data={testDownloadData}/> <DownloadsTable data={testDownloadData.slice(0, amountStableReleases)}/>
<Stack sx={{ mt: '0 !important' }}> <Stack sx={{ mt: '0 !important' }}>
<Link as='button' variant='secondary'> <Link as='button' variant='secondary' onClick={() => {
updateAmountStables(amountStableReleases+10)
}}>
<Text <Text
fontFamily='"JetBrains Mono", monospace' fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors // TODO: move to theme colors
@ -130,10 +136,12 @@ const DownloadsPage: NextPage = ({}) => {
</Stack> </Stack>
{/* TODO: swap for real data */} {/* TODO: swap for real data */}
<DownloadsTable data={testDownloadData} /> <DownloadsTable data={testDownloadData.slice(0, amountDevelopBuilds)} />
<Stack sx={{ mt: '0 !important' }}> <Stack sx={{ mt: '0 !important' }}>
<Link as='button' variant='secondary'> <Link as='button' variant='secondary' onClick={() => {
updateAmountDevelopBuilds(amountDevelopBuilds+10)
}}>
<Text <Text
fontFamily='"JetBrains Mono", monospace' fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors // TODO: move to theme colors