---
import { getCollection } from "astro:content";
import { PROJECTS, SITE } from "@consts";
import Layout from "@layouts/Layout.astro";
import ShowcaseProject from "@components/ShowcaseProject.astro";

const projects = (await getCollection("projects"))
  .filter((project) => !project.data.draft)
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
---

<Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}>
  <div class="mx-auto max-w-[65ch]">
    <h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
      {PROJECTS.TITLE}
    </h1>
    <ol
      class="animate-reveal mt-8 grid grid-cols-2 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3"
    >
      {projects.map((article: any) => <ShowcaseProject collection={article} />)}
    </ol>
  </div>
</Layout>
