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:
parent
e96d48d323
commit
520d48f119
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -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 */}
|
||||||
|
|
Loading…
Reference in New Issue