Use existing Button(ui) component in DocsNavigation.

Author: vLuckyyy

components/docs/content/DocsNavigation.tsx

@@ -2,6 +2,7 @@
 
 import { ArrowLeft, ArrowRight } from "lucide-react";
 import Link from "next/link";
+import { Button } from "@/components/ui/button";
 
 interface NavigationLink {
   title: string;
@@ -20,28 +21,30 @@ export function DocsNavigation({ prev, next }: DocsNavigationProps) {
       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 href={prev.path} prefetch aria-label={`Previous: ${prev.title}`}>
+          <Button
+            variant="secondary"
+            size="md"
+            leftIcon={<ArrowLeft className="h-5 w-5 text-gray-500 dark:text-gray-400" />}
+            className="group text-gray-700 dark:text-gray-300"
+          >
+            <span className="truncate">{prev.title}</span>
+          </Button>
         </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 href={next.path} prefetch aria-label={`Next: ${next.title}`}>
+          <Button
+            variant="secondary"
+            size="md"
+            rightIcon={<ArrowRight className="h-5 w-5 text-gray-500 dark:text-gray-400" />}
+            className="group text-gray-700 dark:text-gray-300"
+          >
+            <span className="truncate">{next.title}</span>
+          </Button>
         </Link>
       ) : (
         <div />