computer-scienceangular-roadmapbackend-roadmapblockchain-roadmapdba-roadmapdeveloper-roadmapdevops-roadmapfrontend-roadmapgo-roadmaphactoberfestjava-roadmapjavascript-roadmapnodejs-roadmappython-roadmapqa-roadmapreact-roadmaproadmapstudy-planvue-roadmapweb3-roadmap
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.
22 lines
811 B
22 lines
811 B
import { Box, Flex, Heading, Text } from '@chakra-ui/react'; |
|
import TreeIcon from '../../icons/tree.svg'; |
|
|
|
type DedicatedRoadmapProps = { |
|
href: string; |
|
title: string; |
|
description: string; |
|
}; |
|
|
|
export function DedicatedRoadmap(props: DedicatedRoadmapProps) { |
|
const { href, title, description } = props; |
|
|
|
return ( |
|
<Flex as={'a'} target='_blank' href={ href } p={5} px={5} mt={6} rounded='md' alignItems='center' _hover={{ bg: 'yellow.400'}} bg='yellow.300'> |
|
<Box d={['none', 'none', 'none', 'block', 'block']} mr={4} height='32px' w='32px' as={TreeIcon} color='gray.900' /> |
|
<Box as='span'> |
|
<Heading fontSize='lg' as={'h4'} mb='2px' color='gray.900'>{ title }</Heading> |
|
<Text color='gray.700' as='span' fontSize='md'>{ description }</Text> |
|
</Box> |
|
</Flex> |
|
); |
|
}
|
|
|