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

Add video listing page

Browse Source
This commit is contained in:
Kamran Ahmed
2021-09-03 13:07:13 +02:00
parent 86f599b5b7
commit afa0e032e7
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
pages/watch/components/video-grid-item.tsx
View File

@ -1,6 +1,7 @@
import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react'; import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
type VideoGridItemProps = { type VideoGridItemProps = {
href: string;
title: string; title: string;
subtitle: string; subtitle: string;
date: string; date: string;
@ -52,10 +53,10 @@ const bgColorList = [
]; ];
export function VideoGridItem(props: VideoGridItemProps) { export function VideoGridItem(props: VideoGridItemProps) {
const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0 } = props; const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0, href } = props;
return ( return (
<Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px' <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={ href } shadow='xl' p='20px'
rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}> rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
<Text mb='7px' fontSize='12px' color='gray.400'> <Text mb='7px' fontSize='12px' color='gray.400'>
{isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>} {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
@ -64,6 +65,6 @@ export function VideoGridItem(props: VideoGridItemProps) {
</Text> </Text>
<Heading color='white' mb={'6px'} fontSize='20px' lineHeight={'28px'}>{title}</Heading> <Heading color='white' mb={'6px'} fontSize='20px' lineHeight={'28px'}>{title}</Heading>
<Text color='gray.300' fontSize='14px'>{subtitle}</Text> <Text color='gray.300' fontSize='14px'>{subtitle}</Text>
</Link> </Box>
); );
} }

1
pages/watch/index.tsx
View File

@ -26,6 +26,7 @@ export default function Watch(props: VideosProps) {
<SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}> <SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
{videos.map((video, counter) => ( {videos.map((video, counter) => (
<VideoGridItem <VideoGridItem
href={video.url}
key={video.id} key={video.id}
title={video.title} title={video.title}
subtitle={video.description} subtitle={video.description}