Roadmap to becoming a developer in 2022
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

75 lines
2.3 KiB

import { Badge, Box, Button, Container, Link, Stack, Text } from '@chakra-ui/react';
import { RoadmapType } from '../lib/roadmap';
type RelatedRoadmapsProps = {
roadmaps: RoadmapType[];
};
const colorsList = [
'gray.700',
'purple.700',
'blue.700',
'red.700',
'green.700',
'teal.700',
'yellow.700',
'cyan.700',
'pink.700'
];
export function RelatedRoadmaps(props: RelatedRoadmapsProps) {
const { roadmaps } = props;
if (!roadmaps.length) {
return null;
}
return (
<Box borderTopWidth={1} bgColor='gray.50' pb='35px' pt='5px'>
<Container maxW='container.md'>
<Box display='flex' position='relative' top='-23px' alignItems='center' justifyContent='space-between'>
<Text textAlign='center' borderWidth={1} bg='white' p='4px' fontWeight='bold' rounded='md' px={'15px'}>
Related Roadmaps
</Text>
<Button as={Link} variant='outline' bg='white' size='sm' _hover={{ textDecoration: 'none', bg: 'gray.100' }}
href='/'>
<Text as='span' display={['inline', 'none', 'none']}>More &rarr;</Text>
<Text as='span' display={['none', 'inline', 'inline']}>All Roadmaps &rarr;</Text>
</Button>
</Box>
<Stack spacing='5px'>
{roadmaps.map((roadmap, counter) => (
<Link
href={`/${roadmap.id}`}
key={roadmap.id}
borderWidth={1}
borderColor='blue.100'
py='7px'
px='14px'
rounded='md'
bg='white'
textDecoration={'none'}
_hover={{ bg: 'gray.100', borderColor: 'blue.200' }}
bgGradient='linear(to-r, white, gray.50)'
display='flex'
alignItems='center'
flexDir={['column', 'row', 'row']}
>
<Text
color={colorsList[counter]}
as='span'
fontWeight='bold'
display={['inline-block']}
minWidth='100px'
>
{roadmap.featuredTitle}
</Text>
<Text as='span' display={['block', 'inline']} isTruncated maxWidth='100%' fontSize={['sm', 'sm', 'md']} color='gray.700'>{roadmap.featuredDescription}</Text>
</Link>
))}
</Stack>
</Container>
</Box>
);
}