src/layouts/TutorialsLayout.astro

---
import { type CollectionEntry } from "astro:content";
import Head from "@components/Head/index.astro";
import BaseLayout from "./BaseLayout.astro";
import { setJumpToState, type JumpToLink } from "../globals/state";
import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
import { categories } from "../content/tutorials/config";
import LinkButton from "@components/LinkButton/index.astro";
import GridItemTutorial from "@components/GridItem/Tutorial.astro";

type TutorialEntry = CollectionEntry<"tutorials">;

const currentLocale = getCurrentLocale(Astro.url.pathname);
const t = await getUiTranslator(currentLocale);

const { entries } = Astro.props;

const sections = categories.map((slug) => {
  const name = t("tutorialCategories", slug);
  const sectionEntries = entries
    .filter((e: TutorialEntry) => e.data.category === slug)
    .sort(
      (a: TutorialEntry, b: TutorialEntry) =>
        (a.data.categoryIndex ?? 1000) - (b.data.categoryIndex ?? 1000)
    );

  return { slug, name, sectionEntries };
});

const pageJumpToLinks = categories
  .map((category) => ({
    url: `#${category}`,
    label: t("tutorialCategories", category),
  }))
  .concat([
    {
      url: "#education-resources",
      label: t("tutorialsPage", "education-resources"),
    },
  ]);

setJumpToState({
  links: pageJumpToLinks as JumpToLink[],
});
---

<Head title="Tutorials" locale={currentLocale} />

<BaseLayout title="Tutorials">
  {
    sections.map(({ slug, name, sectionEntries }) => (
      <section>
        <h2 id={slug} class="mb-gutter-md mt-0">
          {name}
        </h2>
        <ul class="content-grid border-b border-sidebar-type-color last:border-0">
          {sectionEntries.map((entry: TutorialEntry, i: number) => (
            <li class="col-span-3">
              <GridItemTutorial item={entry} lazyLoad={i > 3} />
            </li>
          ))}
        </ul>
      </section>
    ))
  }
  <section>
    <h2 class="mb-gutter-md mt-0">
      {t("tutorialsPage", "education-resources")}<a id="education-resources"
      ></a>
    </h2>
    <p>{t("tutorialsPage", "education-resources-snippet")}</p>
    <LinkButton url="/education-resources" variant="link" class="mt-lg">
      {t("tutorialsPage", "view-education-resources")}
    </LinkButton>
  </section>
</BaseLayout>