1
0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-02-23 19:13:19 +01:00
developer-roadmap/components/roadmap/home-roadmap-item.tsx

72 lines
1.8 KiB
TypeScript
Raw Normal View History

2021-09-22 14:50:03 +02:00
import { Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
2021-08-16 00:10:18 +02:00
import { InfoIcon } from '@chakra-ui/icons';
type RoadmapGridItemProps = {
title: string;
subtitle: string;
isCommunity?: boolean;
2021-09-22 14:50:03 +02:00
isUpcoming?: boolean;
2021-08-29 21:31:29 +02:00
colorIndex?: number;
url: string;
2021-08-16 00:10:18 +02:00
};
const bgColorList = [
2021-11-22 17:30:10 +01:00
'red.100',
'yellow.100',
'green.200',
'teal.200',
'blue.200',
'red.200',
'gray.200',
'teal.200',
'yellow.100',
'green.200',
'red.200'
2021-08-16 00:10:18 +02:00
];
export function HomeRoadmapItem(props: RoadmapGridItemProps) {
2021-09-22 14:50:03 +02:00
const { title, subtitle, isCommunity, colorIndex = 0, url, isUpcoming } = props;
2021-08-16 00:10:18 +02:00
return (
2021-08-29 21:31:29 +02:00
<Box
as={Link}
href={url}
2021-11-22 16:49:32 +01:00
_hover={{ textDecoration: 'none', transform: 'scale(1.02)', opacity: '1 !important' }}
2021-08-16 00:10:18 +02:00
flex={1}
shadow='2xl'
2021-11-22 16:49:32 +01:00
className={'home-roadmap-item'}
bg={'rgba(255,255,255,.05)'}
2021-08-16 00:10:18 +02:00
color='white'
p='15px'
rounded='10px'
pos='relative'
>
{isCommunity && (
<Tooltip label={'Community contribution'} hasArrow placement='top'>
<InfoIcon opacity={0.5} position='absolute' top='10px' right='10px' />
</Tooltip>
)}
2021-11-22 17:30:10 +01:00
<Heading fontSize={['17px', '17px', '22px']} color={bgColorList[colorIndex]} mb='5px'>{title}</Heading>
2021-08-29 21:31:29 +02:00
<Text color='gray.200' fontSize={['13px']}>{subtitle}</Text>
2021-09-22 14:50:03 +02:00
{isUpcoming && (
<Flex
alignItems='center'
justifyContent='center'
pos='absolute'
left={0}
right={0}
top={0}
bottom={0}
rounded='10px'
>
2021-11-22 16:53:12 +01:00
<Text color='white' bg='gray.600' zIndex={1} fontWeight={600} p={'5px 10px'}
2021-09-22 14:50:03 +02:00
rounded='10px'>Upcoming</Text>
2021-11-22 16:53:12 +01:00
<Box bg={'black'} pos='absolute' top={0} left={0} right={0} bottom={0} rounded={'10px'} opacity={0.5} />
2021-09-22 14:50:03 +02:00
</Flex>
)}
2021-08-29 21:31:29 +02:00
</Box>
2021-08-16 00:10:18 +02:00
);
}