Related.astro

---
import Link from "./Link.astro";
import Grid3 from "../components/Grid3.astro";
import HoverableLink from "./HoverableLink.astro";

type Props = {
  related: { title: string; href: string }[];
};

const { related } = Astro.props;
---

<div class="space-y-4">
  <p
    class="text-xl font-semibold hover:text-gray dark:hover:text-light-gray md:text-2xl lg:text-3xl"
    id="related"
  >
    <Link href="#related">Related</Link>
  </p>

  <Grid3>
    {
      related.map((page) => (
        <HoverableLink text={page.title} href={page.href} size="sm" />
      ))
    }
  </Grid3>
</div>