feat : update

components/admin/guide-section-nav.tsx

@@ -4,6 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 import type { MouseEvent } from "react";
 
+import { AddExtraButton } from "@/components/admin/guide-extra-controls";
 import { ScrollableNav } from "@/components/public/scrollable-nav";
 import { navigationIconPath } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
@@ -13,15 +14,18 @@ const sections = [
   { slug: "artifact", label: "Artifacts & Stats" },
   { slug: "constellations", label: "Constellations" },
   { slug: "team", label: "Team Calc" },
-  { slug: "extra", label: "Extra" },
 ] as const;
 
 export function GuideSectionNav({
+  guideId,
   characterKey,
   current,
+  extras,
 }: {
+  guideId: string;
   characterKey: string;
-  current: "overview" | (typeof sections)[number]["slug"];
+  current: string;
+  extras: Array<{ id: string; slug: string; title: string }>;
 }) {
   const confirmNavigation = (event: MouseEvent<HTMLAnchorElement>) => {
     const browserWindow = window as Window & { __guideHasUnsavedChanges?: boolean };
@@ -64,6 +68,27 @@ export function GuideSectionNav({
           </Link>
         );
       })}
+      {extras.map((extra) => (
+        <Link
+          key={extra.id}
+          href={`/admin/${characterKey}/${extra.slug}`}
+          prefetch
+          onClick={confirmNavigation}
+          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 === extra.slug ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+          )}
+        >
+          <Image src={navigationIconPath("extra")!} alt="" width={20} height={20} className="size-5 object-contain" />
+          {extra.title}
+        </Link>
+      ))}
+      <AddExtraButton
+        guideId={guideId}
+        characterKey={characterKey}
+        size="icon-sm"
+        label=""
+      />
     </ScrollableNav>
   );
 }