zhimingge/app/learn/[guaMark]/page.tsx

import Link from "next/link";
import { notFound } from "next/navigation";
import PageShell from "@/components/page-shell";
import GuaFooter from "@/components/learn/gua-footer";
import MarkdownContent from "@/components/learn/markdown-content";
import {
  getGuaName,
  getGuaNumber,
  listGuaMarks,
  readLearnMarkdown,
  stripFrontmatter,
} from "@/lib/content/zhouyi";

export async function generateStaticParams() {
  const marks = await listGuaMarks("traditional");
  return marks.map((guaMark) => ({ guaMark }));
}

export default async function GuaDetailPage({
  params,
}: {
  params: Promise<{ guaMark: string }>;
}) {
  const { guaMark } = await params;
  const marks = await listGuaMarks("traditional");
  if (!marks.includes(guaMark)) {
    notFound();
  }

  const raw = await readLearnMarkdown(guaMark, "traditional");
  const content = stripFrontmatter(raw);

  return (
    <PageShell className="max-w-3xl px-4 py-8">
      <div className="mb-6 text-sm text-muted-foreground">
        <Link href="/learn" className="hover:text-foreground">
          ← 返回总览
        </Link>
      </div>
      <div className="mb-4 text-sm text-muted-foreground">
        第 {getGuaNumber(guaMark)} 卦 · {getGuaName(guaMark)}
      </div>
      <MarkdownContent content={content} variant="traditional" />
      <GuaFooter guaMark={guaMark} />
    </PageShell>
  );
}