developer-roadmap/pages/roadmaps/index.tsx

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-grid-item';
import { getAllRoadmaps, RoadmapType } from '../../lib/roadmap';

type RoadmapsProps = {
  roadmaps: RoadmapType[];
};

export default function Roadmaps(props: RoadmapsProps) {
  const { roadmaps } = props;

  return (
    <Box bg='white' minH='100vh'>
      <GlobalHeader />
      <Box mb='60px'>
        <PageHeader
          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()
    }
  };
}