dekun
26ccecb361
Move width utilities into scanned components as literal class names, add lib to Tailwind content and safelist. Verified max-w-4xl in build CSS and /learn HTML. Co-authored-by: Cursor <cursoragent@cursor.com>
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import Header from "@/components/header";
|
|
import Footer from "@/components/footer";
|
|
import TaijiBackdrop from "@/components/layout/taiji-backdrop";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/** 必须在组件内写完整类名，Tailwind 才能生成对应 CSS */
|
|
const SHELL_WIDTH = {
|
|
default: "w-full max-w-4xl px-4 sm:px-6 lg:px-8",
|
|
narrow: "w-full max-w-3xl px-4 sm:px-6 lg:px-8",
|
|
wide: "w-full max-w-4xl px-4 sm:px-6 lg:px-8",
|
|
} as const;
|
|
|
|
export type ContentShellWidth = keyof typeof SHELL_WIDTH;
|
|
|
|
export default function PageShell({
|
|
children,
|
|
className = "",
|
|
width = "default",
|
|
}: {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
width?: ContentShellWidth;
|
|
}) {
|
|
return (
|
|
<div className="relative flex min-h-screen flex-col bg-muted/50 dark:bg-stone-950">
|
|
<TaijiBackdrop />
|
|
<Header />
|
|
<main
|
|
className={cn(
|
|
"mx-auto flex w-full flex-1 flex-col border-border/40 bg-background sm:border-x",
|
|
SHELL_WIDTH[width],
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|