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

Add videos listing page

Browse Source
This commit is contained in:
Kamran Ahmed
2021-09-03 12:59:44 +02:00
parent 75c4f952dd
commit 86f599b5b7
24 changed files with 230 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,12 +57,12 @@ export function VideoGridItem(props: VideoGridItemProps) {
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'>
<Text mb='7px' fontSize='12px' 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>
<Heading color='white' mb={'6px'} fontSize='20px' lineHeight={'28px'}>{title}</Heading>
<Text color='gray.300' fontSize='14px'>{subtitle}</Text>
</Link>
);

106
pages/watch/index.tsx
View File

@@ -1,12 +1,19 @@
import { Box, Container, SimpleGrid, Stack } from '@chakra-ui/react';
import { Box, Container, SimpleGrid } from '@chakra-ui/react';
import { GlobalHeader } from '../../components/global-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';
import { getAllVideos, VideoType } from '../../lib/video';
type VideosProps = {
videos: VideoType[]
}
export default function Watch(props: VideosProps) {
const { videos = [] } = props;
export default function Watch() {
return (
<Box bg='white' minH='100vh'>
<GlobalHeader />
@@ -17,82 +24,17 @@ export default function Watch() {
/>
<Container maxW='container.md' position='relative'>
<SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '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}
/>
{videos.map((video, counter) => (
<VideoGridItem
key={video.id}
title={video.title}
subtitle={video.description}
date={video.formattedUpdatedAt!}
isNew={counter <= 1}
colorIndex={counter}
isPro={video.isPro}
/>
))}
</SimpleGrid>
</Container>
</Box>
@@ -103,3 +45,11 @@ export default function Watch() {
</Box>
);
}
export async function getStaticProps() {
return {
props: {
videos: getAllVideos()
}
};
}