github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add video listing page

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent ef6709d2bf
commit c188fc57ae
4 changed files with 172 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      components/header.tsx
  2. 2
      pages/guides/index.tsx
  3. 69
      pages/watch/components/video-grid-item.tsx
  4. 102
      pages/watch/index.tsx

2
components/header.tsx
Unescape View File

@ -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>

2
pages/guides/index.tsx
Unescape View File

@ -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';

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

@ -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>
);
}

102
pages/watch/index.tsx
Unescape View File

@ -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>
);
}

Write Preview
Loading…
Cancel
Save