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.

63 lines
1.9 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 { PageHeader } from '../components/page-header';
import { RoadmapGridItem } from '../components/roadmap/roadmap-grid-item';
import { getAllRoadmaps, RoadmapType } from '../lib/roadmap';
import Helmet from '../components/helmet';
import { NewBanner } from './[roadmap]';
type RoadmapsProps = {
roadmaps: RoadmapType[];
};
export default function Roadmaps(props: RoadmapsProps) {
const { roadmaps } = props;
return (
<Box bg='white' minH='100vh'>
<GlobalHeader />
<Helmet
title={'Developer Roadmaps'}
description={'Step by step guides and paths to learn different tools or technologies'}
/>
<Box mb='60px'>
<PageHeader
beforeTitle={<NewBanner />}
title={'Developer Roadmaps'}
subtitle={'Step by step guides and paths to learn different tools or technologies'}
/>
<Container maxW='container.md' position='relative'>
<SimpleGrid columns={[1, 1, 2, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
{roadmaps.map((roadmap, counter) => (
<RoadmapGridItem
key={roadmap.id}
href={`/${roadmap.id}`}
colorIndex={counter}
title={roadmap.featuredTitle}
subtitle={roadmap.description}
isCommunity={roadmap.isCommunity}
isUpcoming={roadmap.isUpcoming}
/>
))}
</SimpleGrid>
</Container>
</Box>
<OpensourceBanner />
<UpdatesBanner />
<Footer />
</Box>
);
}
export async function getStaticProps() {
return {
props: {
roadmaps: getAllRoadmaps()
}
};
}