troylusty.com/src/components/RelatedArticles.astro

---
import Button from "./Button.astro";
import { type CollectionEntry, getCollection } from "astro:content";

type Props = {
  entry: CollectionEntry<"posts"> | CollectionEntry<"projects">;
};

const { entry } = Astro.props;
const { collection } = entry;

const items = (await getCollection(collection))
  .filter((post) => !post.data.draft)
  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
const index = items.findIndex((x) => x.slug === entry.slug);
const prev = items[(index - 1 + items.length) % items.length];
const next = items[(index + 1) % items.length];
---

{
  items.length > 1 ? (
    <div class="mx-auto mt-8 flex max-w-prose justify-between gap-4 md:gap-0">
      <div class="group flex w-fit flex-row items-center justify-between">
        <Button
          href={`/${prev.collection}/${prev.slug}`}
          link={`Previous: ${prev.data.title}`}
        />
      </div>
      <div class="group flex w-fit flex-row items-center justify-between self-end">
        <Button
          href={`/${next.collection}/${next.slug}`}
          link={`Next: ${next.data.title}`}
        />
      </div>
    </div>
  ) : null
}