29 lines
3.3 KiB
TypeScript
29 lines
3.3 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { ArrowLeftIcon, BoxesIcon, GemIcon, SparklesIcon, SwordsIcon, UsersIcon } from "lucide-react";
|
|
import { notFound, redirect } from "next/navigation";
|
|
import { connection } from "next/server";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { AdminHeader } from "@/components/admin/admin-header";
|
|
import { GuideOverviewForm } from "@/components/admin/guide-overview-form";
|
|
import { getAdminSession } from "@/lib/auth/server";
|
|
import { getGuideByCharacterKey } from "@/lib/guides/queries";
|
|
|
|
const sections = [
|
|
{ slug: "weapon", title: "Weapons", description: "จัดอันดับอาวุธ Refinement และเปอร์เซ็นต์", icon: SwordsIcon },
|
|
{ slug: "artifact", title: "Artifacts & Stats", description: "ชุด Artifact, Main/Sub Stats และ Talent", icon: GemIcon },
|
|
{ slug: "constellations", title: "Constellations", description: "รายละเอียด C1–C6 และเปอร์เซ็นต์สะสม", icon: SparklesIcon },
|
|
{ slug: "team", title: "Team Calc", description: "ตัวละคร 4 ตัว Damage share, DPS และ Combo", icon: UsersIcon },
|
|
];
|
|
|
|
export default async function GuideOverviewPage({ params }: { params: Promise<{ character: string }> }) {
|
|
await connection();
|
|
if (!(await getAdminSession())) redirect("/admin/login");
|
|
const { character } = await params;
|
|
const guide = await getGuideByCharacterKey(character);
|
|
if (!guide) notFound();
|
|
return <div className="min-h-svh"><AdminHeader /><main className="mx-auto flex w-full max-w-6xl flex-col gap-8 p-4 sm:p-6 lg:p-8"><header className="flex flex-wrap items-center gap-4"><Button variant="outline" size="icon" render={<Link href="/admin" />} nativeButton={false} aria-label="กลับ Dashboard"><ArrowLeftIcon /></Button><div className="relative size-16 overflow-hidden rounded-lg border"><Image src={guide.coverUrl} alt={guide.name} fill className="object-cover" /></div><div><p className="text-sm text-muted-foreground">เลือกส่วนที่ต้องการแก้ไข</p><h1 className="font-heading text-3xl font-semibold">{guide.name}</h1></div></header><GuideOverviewForm guide={guide} /><div className="grid gap-4 md:grid-cols-2">{sections.map(({ slug, title, description, icon: Icon }) => <Link key={slug} href={`/admin/${guide.characterKey}/${slug}`} className="rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring"><Card className="h-full transition-colors hover:bg-muted/50"><CardHeader><Icon className="size-6 text-primary" /><CardTitle>{title}</CardTitle><CardDescription>{description}</CardDescription></CardHeader></Card></Link>)}<Link href={`/admin/${guide.characterKey}/extra`} className="rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring"><Card className="h-full transition-colors hover:bg-muted/50"><CardHeader><BoxesIcon className="size-6 text-primary" /><CardTitle>Extra sections</CardTitle><CardDescription>ส่วนเสริมแบบภาพ หัวข้อ ข้อความสั้น และเปอร์เซ็นต์</CardDescription></CardHeader></Card></Link></div></main></div>;
|
|
}
|