From afa0e032e7d05407b6ee23c9b24837cdd1b7e537 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 3 Sep 2021 13:07:13 +0200
Subject: [PATCH] Add video listing page

---
 pages/watch/components/video-grid-item.tsx | 7 ++++---
 pages/watch/index.tsx                      | 1 +
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/pages/watch/components/video-grid-item.tsx b/pages/watch/components/video-grid-item.tsx
index 6f80f60ba..f25dfbf2d 100644
--- a/pages/watch/components/video-grid-item.tsx
+++ b/pages/watch/components/video-grid-item.tsx
@@ -1,6 +1,7 @@
 import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
 
 type VideoGridItemProps = {
+  href: string;
   title: string;
   subtitle: string;
   date: string;
@@ -52,10 +53,10 @@ const bgColorList = [
 ];
 
 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 (
-    <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}>
       <Text mb='7px' fontSize='12px' color='gray.400'>
         {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
@@ -64,6 +65,6 @@ export function VideoGridItem(props: VideoGridItemProps) {
       </Text>
       <Heading color='white' mb={'6px'} fontSize='20px' lineHeight={'28px'}>{title}</Heading>
       <Text color='gray.300' fontSize='14px'>{subtitle}</Text>
-    </Link>
+    </Box>
   );
 }
diff --git a/pages/watch/index.tsx b/pages/watch/index.tsx
index 42fc45d35..1f0dd1cd4 100644
--- a/pages/watch/index.tsx
+++ b/pages/watch/index.tsx
@@ -26,6 +26,7 @@ export default function Watch(props: VideosProps) {
           <SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
             {videos.map((video, counter) => (
               <VideoGridItem
+                href={video.url}
                 key={video.id}
                 title={video.title}
                 subtitle={video.description}