---
import { getCollection } from 'astro:content';

import { sortBySortKey } from '../utils/sort-by-sortkey';

import GridLayout from '../layouts/GridLayout.astro';
import PageTitle from '../components/PageTitle.astro';
import ProjectContainer from '../components/ProjectContainer.astro';

import { Content as Intro } from '../text/projects/intro.mdx';

import { mapping } from '../mdx-components';
const allProjects = await getCollection('projects');
allProjects.sort(sortBySortKey).reverse();
---

<GridLayout
	title="Projects"
	description="I’m a Frontend Developer by profession. I worked in Design, Editing, and 3D Animation. These are  projects I created over the last years."
	grid="fullsize"
	class="grid"
	innerGrid
>
	<PageTitle
		grid="wide"
		innerGrid
		class="!col-start-2 !col-end-18 md:!col-start-3 md:!col-end-17"
	>
		Projects
	</PageTitle>

	<article class="col-start-2 col-end-18 md:col-start-6 md:col-end-14">
		<Intro components={mapping} />
	</article>

	<section class="col-start-1 col-end-19 grid gap-y-gap">
		{allProjects.map((project) => <ProjectContainer project={project} />)}
	</section>
</GridLayout>
