interesting
/
go-ethereum
mirror of https://github.com/ethereum/go-ethereum.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

downloadstable section

This commit is contained in:
Corwin Smith 2022-11-07 11:12:10 -07:00
parent dcca953d15
commit 9017e57ac8
4 changed files with 98 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/UI/downloads/DownloadsSection.tsx
View File

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

10
src/components/UI/downloads/SpecificVersionsSection.tsx
View File

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

2
src/components/UI/downloads/index.ts
View File

@ -1,4 +1,4 @@
export * from './DownloadsHero';
export * from './DownloadsSection';
export * from './DownloadsTable';
export * from './SpecificVersionsSection'
export * from './SpecificVersionsSection';

97
src/pages/downloads.tsx
View File

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