developer-roadmap/pages/roadmaps/components/roadmap-grid-item.tsx

import { Badge, Box, Flex, Heading, Link, Text, Tooltip } from '@chakra-ui/react';
import { InfoIcon } from '@chakra-ui/icons';

type RoadmapGridItemProps = {
  title: string;
  subtitle: string;
  href: string;
  isCommunity?: boolean;
  isUpcoming?: boolean;
  colorIndex?: number;
};

const bgColorList = [
  'gray.900',
  'purple.900',
  'blue.900',
  'red.900',
  'green.900',
  'teal.900',
  'yellow.900',
  'cyan.900',
  'pink.900',

  'gray.800',
  'purple.800',
  'blue.800',
  'red.800',
  'green.800',
  'teal.800',
  'yellow.800',
  'cyan.800',
  'pink.800',

  'gray.700',
  'purple.700',
  'blue.700',
  'red.700',
  'green.700',
  'teal.700',
  'yellow.700',
  'cyan.700',
  'pink.700',

  'gray.600',
  'purple.600',
  'blue.600',
  'red.600',
  'green.600',
  'teal.600',
  'yellow.600',
  'cyan.600',
  'pink.600'
];

export function RoadmapGridItem(props: RoadmapGridItemProps) {
  const { title, subtitle, isCommunity = false, isUpcoming = false, colorIndex = 0, href = '/' } = props;

  return (
    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={href} shadow='xl' p='20px'
          rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1} pos='relative'>

      {isCommunity && (
        <Tooltip label={'Community contribution'} hasArrow placement='top'>
          <InfoIcon opacity={0.5} color='gray.100' position='absolute' top='10px' right='10px' />
        </Tooltip>
      )}

      <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
      <Text color='gray.300' fontSize='14px'>{subtitle}</Text>

      {isUpcoming && (
        <Flex
          alignItems='center'
          justifyContent='center'
          pos='absolute'
          left={0}
          right={0}
          top={0}
          bottom={0}
          rounded='10px'
        >
          <Text color='white' bg='yellow.900' zIndex={1} fontWeight={600} p={'5px 10px'}
                rounded='10px'>Upcoming</Text>
          <Box bg={'black'} pos='absolute' top={0} left={0} right={0} bottom={0} rounded={'10px'} opacity={0.5} />
        </Flex>
      )}
    </Box>
  );
}