dekun
9fc7336095
Cap content at 768-960px via PageShell width tiers, add muted outer margins, and limit gua grid to four columns. Co-authored-by: Cursor <cursoragent@cursor.com>
57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import Link from "next/link";
|
||
import PageShell from "@/components/page-shell";
|
||
import { GuaGrid } from "@/components/learn/gua-grid";
|
||
import { ZenCard } from "@/components/ui/zen-card";
|
||
import {
|
||
getGuaName,
|
||
guaNumFromMark,
|
||
listGuaMarks,
|
||
} from "@/lib/content/zhouyi";
|
||
|
||
export default async function LearnOtherPage() {
|
||
const guaMarks = await listGuaMarks("simplified");
|
||
const items = guaMarks.map((mark) => ({
|
||
num: guaNumFromMark(mark),
|
||
name: getGuaName(mark),
|
||
href: `/learn/other/${guaNumFromMark(mark)}`,
|
||
}));
|
||
|
||
return (
|
||
<PageShell className="py-8">
|
||
<div className="mb-8 text-center">
|
||
<h1 className="text-2xl font-bold tracking-wide">易经学习</h1>
|
||
<p className="mt-2 text-sm text-muted-foreground">
|
||
简体图文版 · 六十四卦详览
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mb-8 grid gap-4 sm:grid-cols-2">
|
||
<Link href="/learn" className="block">
|
||
<ZenCard
|
||
title="繁体精简版"
|
||
subtitle="原文精要"
|
||
className="h-full transition-colors hover:border-primary/30"
|
||
>
|
||
<p className="text-sm text-muted-foreground">
|
||
精简版卦辞，适合速读。
|
||
</p>
|
||
<span className="inline-block text-xs text-primary">← 返回</span>
|
||
</ZenCard>
|
||
</Link>
|
||
<ZenCard
|
||
title="简体图文版"
|
||
subtitle="当前浏览"
|
||
className="ring-1 ring-primary/20"
|
||
>
|
||
<p className="text-sm text-muted-foreground">
|
||
含互卦、错卦、综卦及卦象图。
|
||
</p>
|
||
<span className="inline-block text-xs text-primary">已选中</span>
|
||
</ZenCard>
|
||
</div>
|
||
|
||
<GuaGrid items={items} />
|
||
</PageShell>
|
||
);
|
||
}
|