---
import GridItem from '../components/GridItem.astro';
import SimplePageHeader from '../components/SimplePageHeader.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
import { getRoadmapsByTag } from '../lib/roadmap';

const roleRoadmaps = await getRoadmapsByTag('role-roadmap');
const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
---

<BaseLayout
  title='Developer Roadmaps'
  description={'Step by step guides and paths to learn different tools or technologies'}
  permalink={'/roadmaps'}
>
  <SimplePageHeader
    title='Developer Roadmaps'
    description='Step by step guides and paths to learn different tools or technologies'
    showYouTubeAlert={true}
  />

  <div class='flex bg-gray-100 pt-4 pb-14 sm:pt-8 sm:pb-16'>
    <div class='container'>
      <div class='grid grid-cols-1 gap-0.5 sm:grid-cols-2 sm:gap-3'>
        {
          roleRoadmaps.map((roleRoadmap) => (
            <GridItem
              url={`/${roleRoadmap.id}`}
              isNew={roleRoadmap.frontmatter.isNew}
              title={roleRoadmap.frontmatter.title}
              description={roleRoadmap.frontmatter.description}
            />
          ))
        }

        {
          skillRoadmaps.map((skillRoadmap) => (
            <GridItem
              url={`/${skillRoadmap.id}`}
              isNew={skillRoadmap.frontmatter.isNew}
              title={skillRoadmap.frontmatter.title}
              description={skillRoadmap.frontmatter.description}
            />
          ))
        }
      </div>
    </div>
  </div>
</BaseLayout>