Roadmap to becoming a developer in 2022
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

60 lines
1.8 KiB

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/watch/video-grid-item';
import { PageHeader } from '../../components/page-header';
import { getAllVideos, VideoType } from '../../lib/video';
import Helmet from '../../components/helmet';
type VideosProps = {
videos: VideoType[]
}
export default function Watch(props: VideosProps) {
const { videos = [] } = props;
return (
<Box bg='white' minH='100vh'>
<GlobalHeader />
<Helmet title='Watch' description='Graphical video demonstrations on development topics' />
<Box mb='60px'>
<PageHeader
title={'Watch'}
subtitle={'Graphical video demonstrations on development topics'}
/>
<Container maxW='container.md' position='relative'>
<SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
{videos.map((video, counter) => (
<VideoGridItem
target='_blank'
href={video.youtubeLink!}
key={video.id}
title={video.title}
subtitle={video.description}
date={video.formattedUpdatedAt!}
isNew={counter <= 1}
colorIndex={counter}
isPro={video.isPro}
/>
))}
</SimpleGrid>
</Container>
</Box>
<OpensourceBanner />
<UpdatesBanner />
<Footer />
</Box>
);
}
export async function getStaticProps() {
return {
props: {
videos: getAllVideos()
}
};
}