112 lines
4.4 KiB
TypeScript
112 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { FileTextIcon, GemIcon, ImageIcon, MessageSquareIcon, SparklesIcon, SwordIcon, UsersIcon } from "lucide-react";
|
|
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 { cn } from "@/lib/utils";
|
|
|
|
const sections = [
|
|
{ slug: "weapon", label: "Weapons", icon: SwordIcon },
|
|
{ slug: "artifact", label: "Artifacts & Stats", icon: GemIcon },
|
|
{ slug: "constellations", label: "Constellations", icon: SparklesIcon },
|
|
{ slug: "team", label: "Team Calc", icon: UsersIcon },
|
|
] as const;
|
|
|
|
export function GuideSectionNav({
|
|
guideId,
|
|
characterKey,
|
|
current,
|
|
extras,
|
|
}: {
|
|
guideId: string;
|
|
characterKey: string;
|
|
current: string;
|
|
extras: Array<{ id: string; slug: string; title: string }>;
|
|
}) {
|
|
const confirmNavigation = (event: MouseEvent<HTMLAnchorElement>) => {
|
|
const browserWindow = window as Window & { __guideHasUnsavedChanges?: boolean };
|
|
if (typeof window !== "undefined" && browserWindow.__guideHasUnsavedChanges && !window.confirm("ข้อมูลยังบันทึกไม่เสร็จหรือไม่ถูกต้อง ต้องการออกจากหน้านี้หรือไม่?")) {
|
|
event.preventDefault();
|
|
Object.assign(event.nativeEvent, { pageProgressCancelled: true });
|
|
}
|
|
};
|
|
return (
|
|
<ScrollableNav
|
|
ariaLabel="Guide editor navigation"
|
|
activeKey={current}
|
|
className="w-full rounded-xl border bg-card p-2"
|
|
>
|
|
<Link
|
|
href={`/admin/${characterKey}`}
|
|
prefetch={false}
|
|
onClick={confirmNavigation}
|
|
aria-current={current === "overview" ? "page" : undefined}
|
|
className={cn(
|
|
"flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap 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",
|
|
)}
|
|
>
|
|
<ImageIcon className="size-5" aria-hidden="true" />
|
|
Overview
|
|
</Link>
|
|
{sections.map((section) => {
|
|
const Icon = section.icon;
|
|
return (
|
|
<Link
|
|
key={section.slug}
|
|
href={`/admin/${characterKey}/${section.slug}`}
|
|
prefetch={false}
|
|
onClick={confirmNavigation}
|
|
aria-current={current === section.slug ? "page" : undefined}
|
|
className={cn(
|
|
"flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap 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",
|
|
)}
|
|
>
|
|
<Icon className="size-5" aria-hidden="true" />
|
|
{section.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
{extras.map((extra) => (
|
|
<Link
|
|
key={extra.id}
|
|
href={`/admin/${characterKey}/${extra.slug}`}
|
|
prefetch={false}
|
|
onClick={confirmNavigation}
|
|
aria-current={current === extra.slug ? "page" : undefined}
|
|
className={cn(
|
|
"flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap 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",
|
|
)}
|
|
>
|
|
<FileTextIcon className="size-5" aria-hidden="true" />
|
|
{extra.title}
|
|
</Link>
|
|
))}
|
|
<Link
|
|
href={`/admin/${characterKey}/comment`}
|
|
prefetch={false}
|
|
onClick={confirmNavigation}
|
|
aria-current={current === "comment" ? "page" : undefined}
|
|
className={cn(
|
|
"flex min-h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-md px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
current === "comment" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
)}
|
|
>
|
|
<MessageSquareIcon className="size-5" aria-hidden="true" />
|
|
ความคิดเห็น
|
|
</Link>
|
|
<AddExtraButton
|
|
guideId={guideId}
|
|
characterKey={characterKey}
|
|
size="icon-sm"
|
|
label=""
|
|
/>
|
|
</ScrollableNav>
|
|
);
|
|
}
|