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

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