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 { 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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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 */}
|
||||
|
|
Loading…
Reference in New Issue