feat : buzz feedback

components/admin/guide-section-nav.tsx

@@ -1,9 +1,9 @@
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-} from "@/components/ui/pagination";
+import Image from "next/image";
+import Link from "next/link";
+
+import { ScrollableNav } from "@/components/public/scrollable-nav";
+import { navigationIconPath } from "@/lib/navigation";
+import { cn } from "@/lib/utils";
 
 const sections = [
   { slug: "weapon", label: "Weapons" },
@@ -21,29 +21,35 @@ export function GuideSectionNav({
   current: "overview" | (typeof sections)[number]["slug"];
 }) {
   return (
-    <Pagination className="justify-start overflow-x-auto rounded-xl border bg-card p-2">
-      <PaginationContent className="whitespace-nowrap">
-        <PaginationItem>
-          <PaginationLink
-            href={`/admin/${characterKey}`}
-            size="default"
-            isActive={current === "overview"}
+    <ScrollableNav
+      ariaLabel="เมนูแก้ไข Guide"
+      className="w-full rounded-xl border bg-card p-2"
+    >
+      <Link
+        href={`/admin/${characterKey}`}
+        className={cn(
+          "flex min-h-8 shrink-0 items-center rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          current === "overview" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+        )}
+      >
+        Overview
+      </Link>
+      {sections.map((section) => {
+        const iconPath = navigationIconPath(section.slug);
+        return (
+          <Link
+            key={section.slug}
+            href={`/admin/${characterKey}/${section.slug}`}
+            className={cn(
+              "flex min-h-8 shrink-0 items-center gap-2 rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              current === section.slug ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+            )}
           >
-            Overview
-          </PaginationLink>
-        </PaginationItem>
-        {sections.map((section) => (
-          <PaginationItem key={section.slug}>
-            <PaginationLink
-              href={`/admin/${characterKey}/${section.slug}`}
-              size="default"
-              isActive={current === section.slug}
-            >
-              {section.label}
-            </PaginationLink>
-          </PaginationItem>
-        ))}
-      </PaginationContent>
-    </Pagination>
+            {iconPath ? <Image src={iconPath} alt="" width={20} height={20} className="size-5 object-contain" /> : null}
+            {section.label}
+          </Link>
+        );
+      })}
+    </ScrollableNav>
   );
 }