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

View File

@ -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,31 +8,33 @@ 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
> justifyContent='center'
<Flex alignItems='center'
p={4} p={4}
alignItems='center' border='2px solid'
justifyContent='center' borderColor='primary'
borderBottom={{ base: '2px', md: 'none' }} h='100%'
borderRight={{ base: 'none', md: '2px' }} >
borderColor='primary !important' <GopherHomeLinks />
flex='none' </Stack>
> </Box>
<GopherHomeLinks /> </GridItem>
</Flex>
<Flex flexDir='column'> <GridItem>
<Stack p={4} borderBottom='2px' borderColor='primary' sx={{ mt: '0 !important' }}> <Flex flexDir='column' border='2px solid' borderColor='primary' pb={6}>
<Box as='h2' textStyle='h2'> <Stack p={4} borderBottom='2px' borderColor='primary' sx={{ mt: '0 !important' }}>
Specific Versions <Box as='h2' textStyle='h2'>
</Box> Specific Versions
</Stack> </Box>
{children} </Stack>
</Flex> {children}
</Flex> </Flex>
</GridItem>
</Grid>
); );
}; };

View File

@ -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 */}