57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
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" },
|
|
{ slug: "artifact", label: "Artifacts & Stats" },
|
|
{ slug: "constellations", label: "Constellations" },
|
|
{ slug: "team", label: "Team Calc" },
|
|
{ slug: "extra", label: "Extra" },
|
|
] as const;
|
|
|
|
export function GuideSectionNav({
|
|
characterKey,
|
|
current,
|
|
}: {
|
|
characterKey: string;
|
|
current: "overview" | (typeof sections)[number]["slug"];
|
|
}) {
|
|
return (
|
|
<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 gap-2 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",
|
|
)}
|
|
>
|
|
<Image src={navigationIconPath("overview")!} alt="" width={20} height={20} className="size-5 object-contain" />
|
|
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",
|
|
)}
|
|
>
|
|
{iconPath ? <Image src={iconPath} alt="" width={20} height={20} className="size-5 object-contain" /> : null}
|
|
{section.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</ScrollableNav>
|
|
);
|
|
}
|