add a footer to each docs page

Took 31 minutes

src/app/[[...slug]]/page.tsx

@@ -12,6 +12,7 @@ import {
 import { capitalizeWords } from "@/lib/string";
 import { Metadata } from "next";
 import Embed from "@/components/embed";
+import DocsFooter from "@/components/docs-footer";
 
 /**
  * The page to render the documentation markdown content.
@@ -28,17 +29,18 @@ const DocsPage = async ({
     );
 
     // Get the content to display based on the provided slug
-    const content: DocsContentMetadata | undefined = getDocsContent().find(
+    const pages: DocsContentMetadata[] = getDocsContent();
+    const page: DocsContentMetadata | undefined = pages.find(
         (metadata: DocsContentMetadata): boolean =>
             metadata.slug === (slug || "intro")
     );
-    if (!content) {
+    if (!page) {
         notFound();
     }
-    const splitSlug: string[] = content.slug?.split("/") || [];
+    const splitSlug: string[] = page.slug?.split("/") || [];
 
     return (
-        <main className="flex flex-col">
+        <main className="w-full flex flex-col">
             {/* Breadcrumb */}
             <Breadcrumb className="pt-4 select-none">
                 <BreadcrumbList>
@@ -68,7 +70,10 @@ const DocsPage = async ({
             </Breadcrumb>
 
             {/* Content */}
-            <CustomMDX source={content.content} />
+            <CustomMDX source={page.content} />
+            <div className="mt-auto">
+                <DocsFooter pages={pages} />
+            </div>
         </main>
     );
 };

src/components/docs-footer.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { ReactElement } from "react";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+
+const DocsFooter = ({
+    pages,
+}: {
+    pages: DocsContentMetadata[];
+}): ReactElement => {
+    const path: string = usePathname();
+
+    const current: number = pages.findIndex(
+        (page: DocsContentMetadata) => `/${page.slug}` === path
+    );
+    const previous: DocsContentMetadata | undefined =
+        current > 0 ? pages[current - 1] : undefined;
+    const next: DocsContentMetadata | undefined =
+        current < pages.length - 1 ? pages[current + 1] : undefined;
+
+    return (
+        <footer className="mx-14 my-7 flex justify-between">
+            {previous && (
+                <Link
+                    className="flex gap-2 items-center"
+                    href={`/${previous.slug}` || "#"}
+                >
+                    <ChevronLeftIcon className="w-4 h-4" />
+                    {previous.title}
+                </Link>
+            )}
+            {next && (
+                <Link
+                    className="ml-auto flex gap-2 items-center"
+                    href={`/${next.slug}` || "#"}
+                >
+                    {next.title}
+                    <ChevronRightIcon className="w-4 h-4" />
+                </Link>
+            )}
+        </footer>
+    );
+};
+export default DocsFooter;