From c188fc57ae5ddf37872461b75b3c623a9cfde377 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 15 Aug 2021 18:28:05 +0200
Subject: [PATCH] Add video listing page

---
 components/header.tsx                      |   2 +-
 pages/guides/index.tsx                     |   2 +-
 pages/watch/components/video-grid-item.tsx |  69 ++++++++++++++
 pages/watch/index.tsx                      | 102 ++++++++++++++++++++-
 4 files changed, 172 insertions(+), 3 deletions(-)
 create mode 100644 pages/watch/components/video-grid-item.tsx

diff --git a/components/header.tsx b/components/header.tsx
index 8e6ceeff6..515ddafce 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -16,7 +16,7 @@ export function Header() {
                   href='/guides'>Guides</Link>
             <Link borderBottomWidth={0} borderBottomColor='gray.500'
                   _hover={{ textDecoration: 'none', borderBottomColor: 'white' }} fontWeight={500}
-                  href='#'>Videos</Link>
+                  href='/watch'>Videos</Link>
             <Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px'
                   _hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }}
                   fontWeight={500} href={'#'}>Get Updates</Link>
diff --git a/pages/guides/index.tsx b/pages/guides/index.tsx
index f8263a38e..6f9b7ce21 100644
--- a/pages/guides/index.tsx
+++ b/pages/guides/index.tsx
@@ -1,4 +1,4 @@
-import { Badge, Box, Button, Container, Heading, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, Container, Stack } from '@chakra-ui/react';
 import { Header } from '../../components/header';
 import { LinksList } from '../../components/links-list';
 import { LinksListItem } from '../../components/links-list-item';
diff --git a/pages/watch/components/video-grid-item.tsx b/pages/watch/components/video-grid-item.tsx
new file mode 100644
index 000000000..fbebaee26
--- /dev/null
+++ b/pages/watch/components/video-grid-item.tsx
@@ -0,0 +1,69 @@
+import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
+
+type VideoGridItemProps = {
+  title: string;
+  subtitle: string;
+  date: string;
+  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) {
+  const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0 } = props;
+
+  return (
+    <Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px'
+          rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
+      <Text mb='10px' fontSize='13px' color='gray.400'>
+        {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
+        {isPro && <Badge colorScheme={'blue'} mr='10px'>PRO</Badge>}
+        {date}
+      </Text>
+      <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
+      <Text color='gray.300' fontSize='14px'>{subtitle}</Text>
+    </Link>
+  );
+}
diff --git a/pages/watch/index.tsx b/pages/watch/index.tsx
index d77a00e95..b9a0e2839 100644
--- a/pages/watch/index.tsx
+++ b/pages/watch/index.tsx
@@ -1,5 +1,105 @@
+import { Box, Container, SimpleGrid, Stack } from '@chakra-ui/react';
+import { Header } from '../../components/header';
+import { OpensourceBanner } from '../../components/opensource-banner';
+import { UpdatesBanner } from '../../components/updates-banner';
+import { Footer } from '../../components/footer';
+import { VideoGridItem } from './components/video-grid-item';
+import { PageHeader } from '../../components/page-header';
+
 export default function Watch() {
   return (
-    <h1>Hello world</h1>
+    <Box bg='white' minH='100vh'>
+      <Header />
+      <Box mb='60px'>
+        <PageHeader
+          title={'Watch'}
+          subtitle={'Graphical video demonstrations on development topics'}
+        />
+        <Container maxW='container.md' position='relative'>
+          <SimpleGrid columns={{ md: 2 }} mb='30px' spacing='15px'>
+            <VideoGridItem
+              title='Session Based Authentication'
+              subtitle='Learn what the Session Based Authentication is, the pros and cons.'
+              date='June 25, 2021'
+              isNew
+            />
+            <VideoGridItem
+              title='JSON Web Tokens'
+              subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
+              date='June 25, 2021'
+              colorIndex={1}
+              isPro
+            />
+            <VideoGridItem
+              title='JSON Web Tokens'
+              subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
+              date='June 25, 2021'
+              colorIndex={2}
+            />
+            <VideoGridItem
+              title='JSON Web Tokens'
+              subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
+              date='June 25, 2021'
+              colorIndex={3}
+            />
+            <VideoGridItem
+              title='JSON Web Tokens'
+              subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
+              date='June 25, 2021'
+              colorIndex={4}
+              isPro
+            />
+            <VideoGridItem
+              title='JSON Web Tokens'
+              subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
+              date='June 25, 2021'
+              colorIndex={5}
+            />
+            <VideoGridItem
+              title='JSON Web Tokens'
+              subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
+              date='June 25, 2021'
+              colorIndex={6}
+            />
+            <VideoGridItem
+              title='JSON Web Tokens'
+              subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
+              date='June 25, 2021'
+              colorIndex={7}
+            />
+            <VideoGridItem
+              title='JSON Web Tokens'
+              subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
+              date='June 25, 2021'
+              colorIndex={8}
+              isPro
+            />
+            <VideoGridItem
+              title='JSON Web Tokens'
+              subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
+              date='June 25, 2021'
+              colorIndex={9}
+            />
+            <VideoGridItem
+              title='JSON Web Tokens'
+              subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
+              date='June 25, 2021'
+              colorIndex={10}
+              isPro
+            />
+            <VideoGridItem
+              title='JSON Web Tokens'
+              subtitle='Learn what the Session Based Authentication is, the pros and cons and how you can implement it in your apps.'
+              date='June 25, 2021'
+              colorIndex={11}
+            />
+          </SimpleGrid>
+        </Container>
+      </Box>
+
+      <OpensourceBanner />
+      <UpdatesBanner />
+      <Footer />
+    </Box>
   );
 }