Refactor Docs Navigation buttons.

Author: vLuckyyy

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

@@ -3,18 +3,18 @@ import path from "path";
 
 import matter from "gray-matter";
 import type { Metadata } from "next";
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import { MDXRemote } from "next-mdx-remote/rsc";
 import { Suspense, cache } from "react";
 
-import { components, mdxOptions } from "@/components/mdx/mdx-components";
 import { DocsHeader } from "@/components/docs/content/DocsHeader";
+import { DocsNavigation } from "@/components/docs/content/DocsNavigation";
 import { EditOnGitHub } from "@/components/docs/content/EditOnGitHub";
 import { ErrorBoundary } from "@/components/docs/content/ErrorBoundary";
 import { ReadingTime } from "@/components/docs/content/ReadingTime";
 import { ShortLink } from "@/components/docs/content/ShortLink";
 import { docsStructure } from "@/components/docs/sidebar/sidebar-structure";
+import { components, mdxOptions } from "@/components/mdx/mdx-components";
 
 interface DocMeta {
   title: string;
@@ -177,38 +177,7 @@ export default async function DocPage({ params }: Props) {
         </ErrorBoundary>
       </article>
 
-      <div className="mx-auto mt-12 flex w-full max-w-5xl items-center justify-between gap-2">
-        {prev ? (
-          <Link
-            href={prev.path}
-            className="group flex items-center gap-1 text-sm font-normal text-gray-500 transition-colors hover:text-gray-700"
-            prefetch={true}
-            aria-label={`Previous: ${prev.title}`}
-          >
-            <span className="inline-block align-middle transition-transform group-hover:-translate-x-0.5">
-              &#8592;
-            </span>
-            <span className="truncate">{prev.title}</span>
-          </Link>
-        ) : (
-          <div />
-        )}
-        {next ? (
-          <Link
-            href={next.path}
-            className="group flex items-center justify-end gap-1 text-sm font-normal text-gray-500 transition-colors hover:text-gray-700"
-            prefetch={true}
-            aria-label={`Next: ${next.title}`}
-          >
-            <span className="truncate">{next.title}</span>
-            <span className="inline-block align-middle transition-transform group-hover:translate-x-0.5">
-              &#8594;
-            </span>
-          </Link>
-        ) : (
-          <div />
-        )}
-      </div>
+      <DocsNavigation prev={prev} next={next} />
     </div>
   );
 }

components/docs/content/DocsNavigation.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import Link from "next/link";
+
+interface NavigationLink {
+  title: string;
+  path: string;
+}
+
+interface DocsNavigationProps {
+  prev: NavigationLink | null;
+  next: NavigationLink | null;
+}
+
+export function DocsNavigation({ prev, next }: DocsNavigationProps) {
+  return (
+    <nav
+      className="mx-auto mt-12 flex w-full max-w-5xl items-center justify-between gap-4"
+      aria-label="Documentation navigation"
+    >
+      {prev ? (
+        <Link
+          href={prev.path}
+          prefetch
+          aria-label={`Previous: ${prev.title}`}
+          className="group flex items-center gap-3 rounded-lg border border-gray-300 bg-white px-4 py-3 text-gray-700 shadow-sm transition hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+        >
+          <ArrowLeft className="h-5 w-5 shrink-0 text-gray-500 transition group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200" />
+          <span className="truncate text-sm font-medium">{prev.title}</span>
+        </Link>
+      ) : (
+        <div />
+      )}
+
+      {next ? (
+        <Link
+          href={next.path}
+          prefetch
+          aria-label={`Next: ${next.title}`}
+          className="group flex items-center gap-3 rounded-lg border border-gray-300 bg-white px-4 py-3 text-gray-700 shadow-sm transition hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+        >
+          <span className="truncate text-sm font-medium">{next.title}</span>
+          <ArrowRight className="h-5 w-5 shrink-0 text-gray-500 transition group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200" />
+        </Link>
+      ) : (
+        <div />
+      )}
+    </nav>
+  );
+}