Files
developer-roadmap/components/watch/video-grid-item.tsx

72 lines
1.6 KiB
TypeScript
Raw Permalink Normal View History

2021-08-15 18:28:05 +02:00
import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
type VideoGridItemProps = {
2021-09-03 13:07:13 +02:00
href: string;
2021-08-15 18:28:05 +02:00
title: string;
subtitle: string;
date: string;
2021-10-01 10:59:46 +02:00
target?: string;
2021-08-15 18:28:05 +02:00
isNew?: boolean;
isPro?: boolean;
colorIndex?: number;
};
const bgColorList = [
'gray.900',
'purple.900',
'blue.900',
'red.900',
'green.900',
'teal.900',
'yellow.900',
'cyan.900',
'pink.900',
'gray.800',
'purple.800',
'blue.800',
'red.800',
'green.800',
'teal.800',
'yellow.800',
'cyan.800',
'pink.800',
'gray.700',
'purple.700',
'blue.700',
'red.700',
'green.700',
'teal.700',
'yellow.700',
'cyan.700',
'pink.700',
'gray.600',
'purple.600',
'blue.600',
'red.600',
'green.600',
'teal.600',
'yellow.600',
'cyan.600',
'pink.600'
];
export function VideoGridItem(props: VideoGridItemProps) {
2021-10-01 10:59:46 +02:00
const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0, href, target } = props;
2021-08-15 18:28:05 +02:00
return (
2021-10-01 10:59:46 +02:00
<Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={ href } target={target || '_self'} shadow='xl' p='20px'
2021-08-15 18:28:05 +02:00
rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
2021-09-03 12:59:44 +02:00
<Text mb='7px' fontSize='12px' color='gray.400'>
2021-08-15 18:28:05 +02:00
{isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
{isPro && <Badge colorScheme={'blue'} mr='10px'>PRO</Badge>}
{date}
</Text>
2021-09-03 12:59:44 +02:00
<Heading color='white' mb={'6px'} fontSize='20px' lineHeight={'28px'}>{title}</Heading>
2021-08-15 18:28:05 +02:00
<Text color='gray.300' fontSize='14px'>{subtitle}</Text>
2021-09-03 13:07:13 +02:00
</Box>
2021-08-15 18:28:05 +02:00
);
}