From e47c8c44f9fe0a2c7e4bee8f1d551c4810ee777b Mon Sep 17 00:00:00 2001
From: code-env <org.codeen@gmail.com>
Date: Wed, 19 Feb 2025 17:44:29 +0100
Subject: [PATCH] feat: added the docs page navigation

---
 www/src/app/docs/[...slug]/page.tsx  | 19 ++++---
 www/src/app/docs/[...slug]/pager.tsx | 84 ++++++++++++++++++++++++++++
 2 files changed, 96 insertions(+), 7 deletions(-)
 create mode 100644 www/src/app/docs/[...slug]/pager.tsx

diff --git a/www/src/app/docs/[...slug]/page.tsx b/www/src/app/docs/[...slug]/page.tsx
index 1c96872..4d92ba4 100644
--- a/www/src/app/docs/[...slug]/page.tsx
+++ b/www/src/app/docs/[...slug]/page.tsx
@@ -7,6 +7,7 @@ import Image from "next/image"
 import Link from "next/link"
 import { notFound } from "next/navigation"
 import { DetailedHTMLProps, HTMLAttributes } from "react"
+import { DocsPager } from "./pager"
 
 interface Heading {
   level: number
@@ -40,12 +41,15 @@ const Page = async ({ params }: PageProps) => {
       offsetRem: undefined,
     }
   })
-  
-  type CodeProps = DetailedHTMLProps<HTMLAttributes<HTMLPreElement>, HTMLPreElement> & {
-    language: string,
+
+  type CodeProps = DetailedHTMLProps<
+    HTMLAttributes<HTMLPreElement>,
+    HTMLPreElement
+  > & {
+    language: string
     code: string
   }
-  
+
   return (
     <ActiveSectionObserver headings={headings}>
       <div className="pb-20 space-y-6">
@@ -129,7 +133,7 @@ const Page = async ({ params }: PageProps) => {
             ),
             h1: ({ children }) => {
               const element = sections.find(
-                (entry) => entry.title === children?.toString()
+                (entry) => entry.title === children?.toString(),
               )
 
               if (!element) {
@@ -149,7 +153,7 @@ const Page = async ({ params }: PageProps) => {
             },
             h2: ({ children }) => {
               const element = sections.find(
-                (entry) => entry.title === children?.toString()
+                (entry) => entry.title === children?.toString(),
               )
 
               if (!element) {
@@ -169,7 +173,7 @@ const Page = async ({ params }: PageProps) => {
             },
             h3: ({ children }) => {
               const element = sections.find(
-                (entry) => entry.title === children?.toString()
+                (entry) => entry.title === children?.toString(),
               )
 
               if (!element) {
@@ -191,6 +195,7 @@ const Page = async ({ params }: PageProps) => {
           code={document.mdx}
           className="space-y-6"
         />
+        <DocsPager page={document} />
       </div>
     </ActiveSectionObserver>
   )
diff --git a/www/src/app/docs/[...slug]/pager.tsx b/www/src/app/docs/[...slug]/pager.tsx
new file mode 100644
index 0000000..7bbbd59
--- /dev/null
+++ b/www/src/app/docs/[...slug]/pager.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Doc } from "content-collections"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+import Link from "next/link"
+import { useDocNavigation } from "../doc-navigation"
+import { cn } from "@/lib/utils"
+
+export function flattenNestedCat<T>(nestedArray: T[][]): T[] {
+  return nestedArray.reduce((acc, curr) => acc.concat(curr), [])
+}
+
+type DocNav = {
+  title: string
+  meta: {
+    filePath: string
+    fileName: string
+    directory: string
+    path: string
+    extension: string
+  }
+}
+
+export function DocsPager({ page }: { page: Doc }) {
+  const { sortedCategories } = useDocNavigation()
+
+  const cats = sortedCategories.map(([_, docs]) =>
+    docs.map((doc) => ({
+      title: doc.title,
+      meta: doc._meta,
+    })),
+  )
+
+  const newArray = flattenNestedCat(cats)
+
+  const currentPage = newArray.findIndex((item) => item.title === page.title)
+
+  const prev = currentPage !== 0 ? newArray[currentPage - 1] : null
+  const next =
+    currentPage !== newArray.length - 1 ? newArray[currentPage + 1] : null
+
+  console.log({ currentPage })
+
+  return (
+    <nav className="grid grid-cols-2 gap-4 !mt-10">
+      <NavigationButton type="prev" item={prev} />
+      <NavigationButton type="next" item={next} />
+    </nav>
+  )
+}
+
+type NavigationButtonProps = {
+  item: DocNav | null | undefined
+  type: "prev" | "next"
+}
+
+const NavigationButton = ({ item, type }: NavigationButtonProps) => {
+  if (!item) {
+    return <div />
+  }
+  const Icon = type === "next" ? ArrowRight : ArrowLeft
+  return (
+    <Link
+      href={`/docs/${item.meta.path}`}
+      className="flex w-full flex-col gap-2 rounded-lg border border-dark-gray bg-fd-card p-4 text-sm transition-colors hover:bg-zinc-900"
+    >
+      <span
+        className={cn("flex items-center gap-2 text-zinc-600", {
+          "flex-row-reverse": type === "next",
+        })}
+      >
+        <Icon className="size-4" />
+        <span className="capitalize">{type}</span>
+      </span>
+      <span
+        className={cn({
+          "self-end": type === "next",
+        })}
+      >
+        {item.title}
+      </span>
+    </Link>
+  )
+}