mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-02-23 19:13:19 +01:00
23 lines
811 B
TypeScript
23 lines
811 B
TypeScript
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>
|
|
);
|
|
}
|