chore: update SpecificVersionsSection component layout to match homepage (#64)

* chore: update SpecificVersionsSection component layout to match homepage

* chore: remove non-required repeat function
This commit is contained in:
Nicolás Quiroz 2022-11-29 15:47:58 -03:00 committed by GitHub
parent e96d48d323
commit 520d48f119
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 28 deletions

@ -1,4 +1,4 @@
import { Box, Flex, Image, Stack } from '@chakra-ui/react'; import { Box, Flex, Grid, GridItem, Image, Stack } from '@chakra-ui/react';
import { FC } from 'react'; import { FC } from 'react';
import { GopherHomeLinks } from '../svgs'; import { GopherHomeLinks } from '../svgs';
@ -8,24 +8,25 @@ interface Props {
export const SpecificVersionsSection: FC<Props> = ({ children }) => { export const SpecificVersionsSection: FC<Props> = ({ children }) => {
return ( return (
<Flex <Grid id='specificversions' templateColumns={{ base: '1fr', md: '300px 1fr' }} gap={4}>
id='specificversions' <GridItem w='auto'>
border='2px' <Box h='100%'>
borderColor='primary' {/* TODO: replace with animated/video version */}
flexDir={{ base: 'column', md: 'row' }} <Stack
>
<Flex
p={4}
alignItems='center'
justifyContent='center' justifyContent='center'
borderBottom={{ base: '2px', md: 'none' }} alignItems='center'
borderRight={{ base: 'none', md: '2px' }} p={4}
borderColor='primary !important' border='2px solid'
flex='none' borderColor='primary'
h='100%'
> >
<GopherHomeLinks /> <GopherHomeLinks />
</Flex> </Stack>
<Flex flexDir='column'> </Box>
</GridItem>
<GridItem>
<Flex flexDir='column' border='2px solid' borderColor='primary' pb={6}>
<Stack p={4} borderBottom='2px' borderColor='primary' sx={{ mt: '0 !important' }}> <Stack p={4} borderBottom='2px' borderColor='primary' sx={{ mt: '0 !important' }}>
<Box as='h2' textStyle='h2'> <Box as='h2' textStyle='h2'>
Specific Versions Specific Versions
@ -33,6 +34,7 @@ export const SpecificVersionsSection: FC<Props> = ({ children }) => {
</Stack> </Stack>
{children} {children}
</Flex> </Flex>
</Flex> </GridItem>
</Grid>
); );
}; };

@ -142,7 +142,7 @@ const HomePage: NextPage = ({}) => {
</GridItem> </GridItem>
</Grid> </Grid>
<Grid templateColumns={{ base: 'repeat(1, 1fr)', md: '300px 1fr' }} gap={4}> <Grid templateColumns={{ base: '1fr', md: '300px 1fr' }} gap={4}>
<GridItem w='auto'> <GridItem w='auto'>
<Box h='100%'> <Box h='100%'>
{/* TODO: replace with animated/video version */} {/* TODO: replace with animated/video version */}