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.
23 lines
811 B
23 lines
811 B
2 years ago
|
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>
|
||
|
|
);
|
||
|
|
}
|