feat: pagination to next changelog (#701)

apps/web/src/app/(content)/_components/pagination.tsx

···
+import Link from "next/link";
+import type { Changelog } from "contentlayer/generated";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "@openstatus/ui";
+
+export function Pagination({
+  prev,
+  next,
+}: {
+  prev?: Changelog;
+  next?: Changelog;
+}) {
+  return (
+    <div className="mx-auto flex w-full max-w-prose items-center justify-between">
+      <div />
+      {/* {prev ? (
+        <div className="w-1/2 flex-1 text-left">
+          <Button asChild variant="link">
+            <Link href={`/changelog/${prev.slug}`}>
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              <span className="truncate">{prev.title}</span>
+            </Link>
+          </Button>
+        </div>
+      ) : (
+        <div />
+      )} */}
+      {next ? (
+        <div className="w-1/2 flex-1 text-right">
+          <Button asChild variant="link">
+            <Link href={`/changelog/${next.slug}`}>
+              <span className="truncate">{next.title}</span>
+              <ChevronRight className="ml-2 h-4 w-4" />
+            </Link>
+          </Button>
+        </div>
+      ) : (
+        <div />
+      )}
+    </div>
+  );
+}

apps/web/src/app/(content)/changelog/[slug]/page.tsx

···
 import { notFound } from "next/navigation";
 import { allChangelogs } from "contentlayer/generated";
 
+import { Separator } from "@openstatus/ui";
+
 import {
   defaultMetadata,
   ogMetadata,
···
 import { Changelog } from "@/components/content/changelog";
 import { Shell } from "@/components/dashboard/shell";
 import { BackButton } from "@/components/layout/back-button";
+import { Pagination } from "../../_components/pagination";
 
 // export const dynamic = "force-static";
 
···
   };
 }
 
+function getChangelogPagination(slug: string) {
+  const changelogs = allChangelogs.sort(
+    (a, b) =>
+      new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime(),
+  );
+  const findIndex = changelogs.findIndex(
+    (changelog) => changelog.slug === slug,
+  );
+  return {
+    prev: changelogs?.[findIndex - 1],
+    next: changelogs?.[findIndex + 1],
+  };
+}
+
 export default function ChangelogPage({
   params,
 }: {
···
     notFound();
   }
 
+  const { next, prev } = getChangelogPagination(params.slug);
+
   return (
     <>
       <BackButton href="/changelog" />
-      <Shell className="sm:py-8 md:py-12">
+      <Shell className="flex flex-col gap-8 sm:py-8 md:gap-12 md:py-12">
         <Changelog post={post} />
+        <Separator className="mx-auto max-w-prose" />
+        <Pagination {...{ next, prev }} />
       </Shell>
     </>
   );

apps/web/src/app/(content)/changelog/page.tsx

···
     title: "Changelog | OpenStatus",
   },
 };
+
 export default async function Changelog() {
-  const posts = allChangelogs.sort(
+  const changelogs = allChangelogs.sort(
     (a, b) =>
       new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime(),
   );
···
         title="Changelog"
         description="All the latest features, fixes and work to OpenStatus."
       >
-        {posts.map((post) => (
+        {changelogs.map((changelog) => (
           <Timeline.Article
-            key={post.slug}
-            publishedAt={post.publishedAt}
-            imageSrc={post.image}
-            title={post.title}
-            href={`./changelog/${post.slug}`}
+            key={changelog.slug}
+            publishedAt={changelog.publishedAt}
+            imageSrc={changelog.image}
+            title={changelog.title}
+            href={`./changelog/${changelog.slug}`}
           >
-            <Mdx code={post.body.code} />
+            <Mdx code={changelog.body.code} />
           </Timeline.Article>
         ))}
       </Timeline>

apps/web/src/content/changelog/terraform-provider.mdx

···
 enabling you to define and manage your OpenStatus resources as code.
 
 Here's the link to the:
-https://registry.terraform.io/providers/openstatus/openstatus/latest/docs
+[OpenStats Terraform Provider](https://registry.terraform.io/providers/openstatus/openstatus/latest/docs)