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.
38 lines
1.1 KiB
38 lines
1.1 KiB
import { Badge, Flex, Link, Text } from '@chakra-ui/react'; |
|
import { VideoIcon } from '../../../icons/video-icon'; |
|
|
|
type VideoListItemProps = { |
|
title: string; |
|
duration: string; |
|
isPro?: boolean; |
|
}; |
|
|
|
export function VideoListItem(props: VideoListItemProps) { |
|
const { title, duration, isPro = false } = props; |
|
|
|
return ( |
|
<Link |
|
fontSize='15px' |
|
p='10px' |
|
d='flex' |
|
fontWeight={500} |
|
color='gray.600' |
|
alignItems='center' |
|
justifyContent={'space-between'} |
|
_hover={{ |
|
textDecoration: 'none', |
|
color: 'blue.400', |
|
'& .video-title': { |
|
transform: 'translateX(10px)' |
|
} |
|
}} |
|
> |
|
<Flex alignItems='center' className='video-title' transition={'200ms'}> |
|
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} /> |
|
<Text as='span' ml='7px'>{title}</Text> |
|
{isPro && <Badge variant='subtle' colorScheme='purple' ml='10px'>Pro</Badge>} |
|
</Flex> |
|
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>{duration}</Text> |
|
</Link> |
|
); |
|
}
|
|
|