37 lines
2.8 KiB
TypeScript
37 lines
2.8 KiB
TypeScript
import { Suspense } from "react";
|
|
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { notFound } from "next/navigation";
|
|
import { connection } from "next/server";
|
|
import Image from "@/components/ui/resilient-image";
|
|
import { SiteHeader } from "@/components/public/site-header";
|
|
import { SiteFooter } from "@/components/public/site-footer";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import { CommentBoardContent } from "@/components/comments/comment-board-content";
|
|
import { CommentBoardSkeleton } from "@/components/comments/comment-skeleton";
|
|
import { getCachedStygianSchedules } from "@/lib/cache/stygian";
|
|
|
|
export const instant = false;
|
|
export const metadata: Metadata = { title: "Stygian" };
|
|
export default async function StygianCommentPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
|
|
await connection();
|
|
const query = await searchParams;
|
|
const schedules = await getCachedStygianSchedules();
|
|
const raw = Array.isArray(query.schedule) ? query.schedule[0] : query.schedule;
|
|
const selected = raw ? schedules.find((entry) => entry.scheduleId === Number(raw)) : schedules[0];
|
|
if (!selected) notFound();
|
|
const target = `stygian:${selected.scheduleId}`;
|
|
return <div className="flex min-h-svh flex-col bg-background"><SiteHeader editHref="/admin/stygian" />
|
|
<main className="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-6 p-4 sm:p-6 lg:p-10">
|
|
<header className="flex items-center gap-3"><Image src="/icon/nav/Comment.webp" alt="" width={48} height={48} className="size-12 object-contain" />
|
|
<div><p className="text-sm text-muted-foreground">Stygian · {selected.challengeName}</p><h1 className="font-heading text-3xl font-semibold">ความคิดเห็น</h1></div>
|
|
</header>
|
|
<nav aria-label="เมนู Stygian" className="flex flex-wrap gap-2"><Link href={`/stygian?schedule=${selected.scheduleId}`} className={buttonVariants({ variant: "outline" })}>ไกด์</Link>
|
|
<Link href={`/stygian/comment?schedule=${selected.scheduleId}`} aria-current="page" className={buttonVariants({ variant: "secondary" })}>ความคิดเห็น</Link></nav>
|
|
<nav aria-label="รอบ Stygian" className="flex flex-wrap gap-2">{schedules.map((schedule) => <Link key={schedule.scheduleId}
|
|
href={`/stygian/comment?schedule=${schedule.scheduleId}`} prefetch={false} aria-current={schedule.scheduleId === selected.scheduleId ? "page" : undefined}
|
|
className={buttonVariants({ variant: schedule.scheduleId === selected.scheduleId ? "default" : "outline" })}>{schedule.challengeName}</Link>)}</nav>
|
|
<Suspense key={target} fallback={<CommentBoardSkeleton />}><CommentBoardContent target={target} /></Suspense>
|
|
</main><SiteFooter /></div>;
|
|
}
|