GuidesList.astro

---
import type { MDXInstance } from "astro";

interface GuidePageFrontMatter {
  weight: number;
  topic: number;
}

const allPages = (await Astro.glob("../../pages/*/guides/*/*")) as MDXInstance<GuidePageFrontMatter>[];
const pages = allPages
  .filter((page) => page.url?.includes(Astro.url.pathname))
  .sort((a, b) => a.frontmatter.weight - b.frontmatter.weight);
---

<ul class="grid grid-cols-1 gap-8 px-0 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
  {
    pages.map(
      (page) =>
        page.frontmatter.topic && (
          <li class="w-full list-none">
            <a
              class="flex h-40 w-full items-center justify-center rounded-lg border-4 border-solid p-4 text-center font-semibold border-gradient-secondary border-bg-primary dark:border-bg-primary-dark"
              href={page.url}
            >
              {page.frontmatter.topic}
            </a>
          </li>
        )
    )
  }
</ul>