downloadstable section
This commit is contained in:
parent
dcca953d15
commit
9017e57ac8
|
@ -10,7 +10,14 @@ interface Props {
|
|||
sectionTitle: string;
|
||||
}
|
||||
|
||||
export const DownloadsSection: FC<Props> = ({ children, imgSrc, imgAltText, sectionDescription, sectionTitle, id }) => {
|
||||
export const DownloadsSection: FC<Props> = ({
|
||||
children,
|
||||
imgSrc,
|
||||
imgAltText,
|
||||
sectionDescription,
|
||||
sectionTitle,
|
||||
id
|
||||
}) => {
|
||||
return (
|
||||
<Stack border='2px solid' borderColor='brand.light.primary' id={id}>
|
||||
{!!imgSrc && (
|
||||
|
@ -23,13 +30,9 @@ export const DownloadsSection: FC<Props> = ({ children, imgSrc, imgAltText, sect
|
|||
<Flex
|
||||
borderBottom='2px solid'
|
||||
borderColor='brand.light.primary'
|
||||
flexDirection={{base: 'column', md: 'row'}}
|
||||
flexDirection={{ base: 'column', md: 'row' }}
|
||||
>
|
||||
<Flex
|
||||
p={4}
|
||||
sx={{ mt: '0 !important' }}
|
||||
flex='none'
|
||||
>
|
||||
<Flex p={4} sx={{ mt: '0 !important' }} flex='none'>
|
||||
<Center>
|
||||
<Text as='h2' textStyle='h2'>
|
||||
{sectionTitle}
|
||||
|
@ -37,22 +40,20 @@ export const DownloadsSection: FC<Props> = ({ children, imgSrc, imgAltText, sect
|
|||
</Center>
|
||||
</Flex>
|
||||
|
||||
{
|
||||
sectionDescription && (
|
||||
<Stack
|
||||
p={4}
|
||||
borderLeft={{ base: 'none', md: '2px solid #11866f'}}
|
||||
borderTop={{ base: '2px solid #11866f', md: 'none'}}
|
||||
>
|
||||
<Center>
|
||||
{sectionDescription}
|
||||
</Center>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
{sectionDescription && (
|
||||
<Stack
|
||||
p={4}
|
||||
borderLeft={{ base: 'none', md: '2px solid #11866f' }}
|
||||
borderTop={{ base: '2px solid #11866f', md: 'none' }}
|
||||
>
|
||||
<Center>{sectionDescription}</Center>
|
||||
</Stack>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
<Stack spacing={4} sx={{ mt: '0 !important' }} >{children}</Stack>
|
||||
<Stack spacing={4} sx={{ mt: '0 !important' }}>
|
||||
{children}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -8,25 +8,23 @@ interface Props {
|
|||
export const SpecificVersionsSection: FC<Props> = ({ children }) => {
|
||||
return (
|
||||
<Flex
|
||||
id="specificversions"
|
||||
id='specificversions'
|
||||
border='2px solid'
|
||||
borderColor='brand.light.primary'
|
||||
flexDir={{base: 'column', md: 'row'}}
|
||||
flexDir={{ base: 'column', md: 'row' }}
|
||||
>
|
||||
<Flex
|
||||
p={4}
|
||||
alignItems='center'
|
||||
justifyContent='center'
|
||||
borderBottom={{ base: '2px solid #11866f', md: 'none'}}
|
||||
borderBottom={{ base: '2px solid #11866f', md: 'none' }}
|
||||
borderRight={{ base: 'none', md: '2px solid #11866f' }}
|
||||
flex='none'
|
||||
>
|
||||
{/* TODO: use NextImage */}
|
||||
<Image src='/images/pages/gopher-home-side-desktop.svg' alt='Gopher facing right' />
|
||||
</Flex>
|
||||
<Flex
|
||||
flexDir='column'
|
||||
>
|
||||
<Flex flexDir='column'>
|
||||
<Stack
|
||||
p={4}
|
||||
borderBottom='2px solid'
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
export * from './DownloadsHero';
|
||||
export * from './DownloadsSection';
|
||||
export * from './DownloadsTable';
|
||||
export * from './SpecificVersionsSection'
|
||||
export * from './SpecificVersionsSection';
|
||||
|
|
|
@ -1,8 +1,13 @@
|
|||
import { Code, Link, ListItem, Stack, Text, UnorderedList } from '@chakra-ui/react';
|
||||
import { Center, Code, Flex, Link, ListItem, Stack, Text, UnorderedList } from '@chakra-ui/react';
|
||||
import type { NextPage } from 'next';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { DownloadsHero, DownloadsSection, DownloadsTable, SpecificVersionsSection } from '../components/UI/downloads';
|
||||
import {
|
||||
DownloadsHero,
|
||||
DownloadsSection,
|
||||
DownloadsTable,
|
||||
SpecificVersionsSection
|
||||
} from '../components/UI/downloads';
|
||||
import { DataTable } from '../components/UI';
|
||||
|
||||
import {
|
||||
|
@ -105,19 +110,37 @@ const DownloadsPage: NextPage = () => {
|
|||
{/* TODO: swap test data for real data */}
|
||||
<DownloadsTable data={testDownloadData.slice(0, amountStableReleases)} />
|
||||
|
||||
<Stack sx={{ mt: '0 !important' }}>
|
||||
<Link as='button' variant='button-link-secondary' onClick={showMoreStableReleases}>
|
||||
<Text
|
||||
fontFamily='"JetBrains Mono", monospace'
|
||||
fontWeight={700}
|
||||
textTransform='uppercase'
|
||||
textAlign='center'
|
||||
p={4}
|
||||
>
|
||||
Show older releases
|
||||
</Text>
|
||||
</Link>
|
||||
</Stack>
|
||||
<Flex
|
||||
sx={{ mt: '0 !important' }}
|
||||
flexDirection={{ base: 'column', md: 'row' }}
|
||||
justifyContent='space-between'
|
||||
>
|
||||
<Stack p={4} display={{ base: 'none', md: 'block' }}>
|
||||
<Center>
|
||||
{/* TODO: swap testDownloadData with actual data */}
|
||||
<Text>
|
||||
Showing {amountStableReleases} latest releases of a total{' '}
|
||||
{testDownloadData.length} releases
|
||||
</Text>
|
||||
</Center>
|
||||
</Stack>
|
||||
<Stack
|
||||
sx={{ mt: '0 !important' }}
|
||||
borderLeft={{ base: 'none', md: '2px solid #11866f' }}
|
||||
>
|
||||
<Link as='button' variant='button-link-secondary' onClick={showMoreStableReleases}>
|
||||
<Text
|
||||
fontFamily='"JetBrains Mono", monospace'
|
||||
fontWeight={700}
|
||||
textTransform='uppercase'
|
||||
textAlign='center'
|
||||
p={4}
|
||||
>
|
||||
Show older releases
|
||||
</Text>
|
||||
</Link>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</DownloadsSection>
|
||||
|
||||
<DownloadsSection
|
||||
|
@ -136,19 +159,37 @@ const DownloadsPage: NextPage = () => {
|
|||
{/* TODO: swap for real data */}
|
||||
<DownloadsTable data={testDownloadData.slice(0, amountDevelopBuilds)} />
|
||||
|
||||
<Stack sx={{ mt: '0 !important' }}>
|
||||
<Link as='button' variant='button-link-secondary' onClick={showMoreDevelopBuilds}>
|
||||
<Text
|
||||
fontFamily='"JetBrains Mono", monospace'
|
||||
fontWeight={700}
|
||||
textTransform='uppercase'
|
||||
textAlign='center'
|
||||
p={4}
|
||||
>
|
||||
Show older releases
|
||||
</Text>
|
||||
</Link>
|
||||
</Stack>
|
||||
<Flex
|
||||
sx={{ mt: '0 !important' }}
|
||||
flexDirection={{ base: 'column', md: 'row' }}
|
||||
justifyContent='space-between'
|
||||
>
|
||||
<Stack p={4} display={{ base: 'none', md: 'block' }}>
|
||||
<Center>
|
||||
{/* TODO: swap testDownloadData with actual data */}
|
||||
<Text>
|
||||
Showing {amountDevelopBuilds} latest releases of a total{' '}
|
||||
{testDownloadData.length} releases
|
||||
</Text>
|
||||
</Center>
|
||||
</Stack>
|
||||
<Stack
|
||||
sx={{ mt: '0 !important' }}
|
||||
borderLeft={{ base: 'none', md: '2px solid #11866f' }}
|
||||
>
|
||||
<Link as='button' variant='button-link-secondary' onClick={showMoreStableReleases}>
|
||||
<Text
|
||||
fontFamily='"JetBrains Mono", monospace'
|
||||
fontWeight={700}
|
||||
textTransform='uppercase'
|
||||
textAlign='center'
|
||||
p={4}
|
||||
>
|
||||
Show older releases
|
||||
</Text>
|
||||
</Link>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</DownloadsSection>
|
||||
|
||||
<DownloadsSection
|
||||
|
|
Loading…
Reference in New Issue