gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Responsive homepage

Browse Source
This commit is contained in:
Kamran Ahmed
2021-08-28 14:02:22 +02:00
parent 8d05031e51
commit 3f2ef9ae48
3 changed files with 32 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/links-list-item.tsx
View File

@ -5,15 +5,16 @@ type LinksListItemProps = {
title: string;
subtitle: string;
badgeText?: string;
icon?: React.ReactChild
icon?: React.ReactChild;
hideSubtitleOnMobile?: boolean;
};
export function LinksListItem(props: LinksListItemProps) {
const { title, subtitle, badgeText, icon } = props;
const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false } = props;
return (
<Link
fontSize='15px'
fontSize={['14px', '14px', '15px']}
py='9px'
d='flex'
flexDirection={['column', 'row', 'row']}
@ -37,7 +38,8 @@ export function LinksListItem(props: LinksListItemProps) {
{badgeText &&
<Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>{badgeText}</Badge>}
</Flex>
<Text mt={['4px', 0]} as='span' fontSize='12px' color='gray.500'>{subtitle}</Text>
<Text d={[hideSubtitleOnMobile ? 'none' : 'inline', 'inline']} mt={['3px', 0]} as='span'
fontSize={['11px', '11px', '12px']} color='gray.500'>{subtitle}</Text>
</Link>
);
}