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

View File

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