40cc3fc9e3
- PageContainer wide 档 max-w-6xl→max-w-7xl；作品库改用 wide 档 - 作品库卡片网格 lg 三列基础上加 xl:grid-cols-4，宽屏铺满少留白 - 写作台正文测量 720→768px（约 42 中文字/行，仍舒适），收窄两侧空档
31 lines
709 B
TypeScript
31 lines
709 B
TypeScript
import type { ReactNode } from "react";
|
||
|
||
import { cn } from "@/lib/ui/variants";
|
||
|
||
export type PageWidth = "prose" | "default" | "wide";
|
||
|
||
const widths: Record<PageWidth, string> = {
|
||
prose: "max-w-3xl",
|
||
default: "max-w-5xl",
|
||
wide: "max-w-7xl",
|
||
};
|
||
|
||
interface PageContainerProps {
|
||
children: ReactNode;
|
||
width?: PageWidth;
|
||
className?: string;
|
||
}
|
||
|
||
// 统一页容器：居中 + 一致的最大宽度与内边距节奏（替换各页手写的 mx-auto max-w-* px-6 py-10）。
|
||
export function PageContainer({
|
||
children,
|
||
width = "default",
|
||
className,
|
||
}: PageContainerProps) {
|
||
return (
|
||
<div className={cn("mx-auto px-6 py-10 sm:px-8", widths[width], className)}>
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|