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.
 
 
 
 
 

49 lines
1.4 KiB

import React from 'react';
import { Badge, Flex, Link, Text } from '@chakra-ui/react';
type LinksListItemProps = {
href: string;
title: string;
subtitle: string;
badgeText?: string;
target?: string;
icon?: React.ReactChild;
hideSubtitleOnMobile?: boolean;
};
export function LinksListItem(props: LinksListItemProps) {
const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false, href, target } = props;
return (
<Link
target={target || '_self'}
href={href}
fontSize={['14px', '14px', '15px']}
py='9px'
d='flex'
flexDirection={['column', 'row', 'row']}
fontWeight={500}
color='gray.600'
alignItems={['flex-start', 'center']}
justifyContent={'space-between'}
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .list-item-title': {
transform: 'translateX(10px)'
}
}}
isTruncated
maxWidth='100%'
>
<Flex alignItems='center' className='list-item-title' transition={'200ms'}>
{icon}
<Text maxWidth={'345px'} isTruncated as='span'>{title}</Text>
{badgeText &&
<Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>{badgeText}</Badge>}
</Flex>
<Text d={[hideSubtitleOnMobile ? 'none' : 'inline', 'inline']} mt={['3px', 0]} as='span'
fontSize={['11px', '11px', '12px']} color='gray.500'>{subtitle}</Text>
</Link>
);
}