52 lines
3.8 KiB
TypeScript
52 lines
3.8 KiB
TypeScript
import Link from "next/link";
|
|
import { Suspense } from "react";
|
|
import { connection } from "next/server";
|
|
|
|
import { SiteFooter } from "@/components/public/site-footer";
|
|
import { SiteHeader } from "@/components/public/site-header";
|
|
import { StygianGuide } from "@/components/public/stygian-guide";
|
|
import { LiveRefresh } from "@/components/live-refresh";
|
|
import { CommentBoardContent } from "@/components/comments/comment-board-content";
|
|
import { CommentBoardSkeleton } from "@/components/comments/comment-skeleton";
|
|
import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import { getCachedStygianSchedule, getCachedStygianSchedules } from "@/lib/cache/stygian";
|
|
import { getActiveCatalog } from "@/lib/guides/queries";
|
|
|
|
export const instant = false;
|
|
|
|
export default async function StygianPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
|
|
await connection();
|
|
const query = await searchParams;
|
|
const schedules = await getCachedStygianSchedules();
|
|
const rawSchedule = Array.isArray(query.schedule) ? query.schedule[0] : query.schedule;
|
|
const requestedId = Number(rawSchedule);
|
|
const selectedId = schedules.some((entry) => entry.scheduleId === requestedId) ? requestedId : schedules[0]?.scheduleId;
|
|
const [schedule, catalog] = await Promise.all([selectedId ? getCachedStygianSchedule(selectedId) : null, getActiveCatalog()]);
|
|
return (
|
|
<div className="flex min-h-svh flex-col bg-background">
|
|
<LiveRefresh endpoint="/api/events/stygian" />
|
|
<SiteHeader editHref="/admin/stygian" />
|
|
<main className="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-8 px-4 py-10 sm:px-6 sm:py-14">
|
|
<header>
|
|
<p className="text-sm font-medium text-primary">Stygian Onslaught</p>
|
|
<h1 className="font-heading text-4xl font-semibold">ไกด์ Stygian</h1>
|
|
<p className="mt-3 text-muted-foreground">เลือกเวอร์ชัน ระดับบอส และบอสที่ต้องการดู เพื่ออ่านทีมแนะนำและกลไกของบอส</p>
|
|
</header>
|
|
{schedules.length ? <div className="flex flex-col gap-2"><p className="text-sm font-medium">เลือกเวอร์ชัน</p><nav className="flex flex-wrap gap-2" aria-label="เวอร์ชัน Stygian">{schedules.map((entry) =>
|
|
<Link key={entry.scheduleId} href={`/stygian?schedule=${entry.scheduleId}`} aria-current={entry.scheduleId === selectedId ? "page" : undefined}
|
|
className={buttonVariants({ variant: entry.scheduleId === selectedId ? "default" : "outline", size: "sm", className: "max-sm:min-h-11" })}>{entry.challengeName}</Link>)}</nav></div> : null}
|
|
{schedule && catalog ? <StygianGuide schedule={schedule} catalog={catalog} /> : (
|
|
<Empty className="border"><EmptyHeader><EmptyTitle>ยังไม่มีไกด์ Stygian</EmptyTitle><EmptyDescription>กำลังเตรียมข้อมูล กลับมาอ่านได้ภายหลัง หรือเลือกไกด์ตัวละครระหว่างรอ</EmptyDescription></EmptyHeader><Link href="/" className={buttonVariants({ variant: "outline" })}>เลือกไกด์ตัวละคร</Link></Empty>
|
|
)}
|
|
{schedule && <section id="comments" aria-label="ความคิดเห็น Stygian" className="scroll-mt-24 border-t pt-8">
|
|
<Suspense key={`stygian:${schedule.scheduleId}`} fallback={<CommentBoardSkeleton />}>
|
|
<CommentBoardContent target={`stygian:${schedule.scheduleId}`} />
|
|
</Suspense>
|
|
</section>}
|
|
</main>
|
|
<SiteFooter />
|
|
</div>
|
|
);
|
|
}
|