85 lines
1.7 KiB
TypeScript
85 lines
1.7 KiB
TypeScript
import type { HTMLAttributes, ElementType } from "react";
|
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* 容器：统一站点内容宽度与左右留白。
|
|
* DESIGN.md：营销页面 1280px 最大宽度 + 32px 沟槽。
|
|
*/
|
|
const containerVariants = cva("mx-auto w-full", {
|
|
variants: {
|
|
size: {
|
|
// 文章正文最舒适的阅读宽度
|
|
prose: "max-w-[720px]",
|
|
default: "max-w-[1280px]",
|
|
narrow: "max-w-[960px]",
|
|
},
|
|
gutter: {
|
|
default: "px-lg sm:px-xxl",
|
|
none: "px-0",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: "default",
|
|
gutter: "default",
|
|
},
|
|
});
|
|
|
|
export type ContainerProps = HTMLAttributes<HTMLElement> &
|
|
VariantProps<typeof containerVariants> & {
|
|
/** 渲染的语义化标签，默认 div */
|
|
as?: ElementType;
|
|
};
|
|
|
|
export function Container({
|
|
className,
|
|
size,
|
|
gutter,
|
|
as: Component = "div",
|
|
...props
|
|
}: ContainerProps) {
|
|
return (
|
|
<Component
|
|
className={cn(containerVariants({ size, gutter }), className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 区块：负责垂直节奏。
|
|
* DESIGN.md：营销页区块之间 96px，文档面 32–64px。
|
|
*/
|
|
const sectionVariants = cva("w-full", {
|
|
variants: {
|
|
spacing: {
|
|
none: "py-0",
|
|
sm: "py-section-sm",
|
|
default: "py-section",
|
|
lg: "py-section-lg",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
spacing: "default",
|
|
},
|
|
});
|
|
|
|
export type SectionProps = HTMLAttributes<HTMLElement> &
|
|
VariantProps<typeof sectionVariants> & {
|
|
as?: ElementType;
|
|
};
|
|
|
|
export function Section({
|
|
className,
|
|
spacing,
|
|
as: Component = "section",
|
|
...props
|
|
}: SectionProps) {
|
|
return (
|
|
<Component
|
|
className={cn(sectionVariants({ spacing }), className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|