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.

31 lines
901 B

import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
type GuideGridItemProps = {
title: string;
subtitle: string;
date: string;
isNew?: boolean;
colorIndex?: number;
};
const bgColorList = [
'gray.700',
'purple.800'
];
export function GuideGridItem(props: GuideGridItemProps) {
const { title, subtitle, date, isNew = false, colorIndex = 0 } = props;
return (
<Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px'
rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
<Text mb='10px' fontSize='13px' color='gray.400'>
{isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
{date}
</Text>
<Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
<Text color='gray.300' fontSize='14px'>{subtitle}</Text>
</Link>
);
}