---
import type { CollectionEntry } from 'astro:content';
type Projects = CollectionEntry<'projects'>;
import { getCollection } from 'astro:content';

import { sortBySortKey } from '../utils';

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: Projects[] = await getCollection('projects');
allProjects.sort(sortBySortKey).reverse();

const title = 'Projects';
const 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.';
---

<GridLayout title={title} description={description} grid="wide" class="grid" backLink="/" innerGrid>
	<PageTitle grid="wide" innerGrid class="">Projects</PageTitle>

	<article
		class="col-start-1 col-end-19 md:col-start-3 md:col-end-13 lg:col-start-4 lg:col-end-12 xl:col-start-5 xl:col-end-11"
	>
		<Intro components={mapping} />
	</article>

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