53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import type { ReactNode } from "react";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
/**
|
||
* 区块标题：DESIGN.md 中反复出现的「大写微标签 + 标题 + 描述」结构。
|
||
* 微标签使用 {typography.micro-uppercase}（11px / 600 / +0.5px 字距）。
|
||
*/
|
||
export interface SectionHeadingProps {
|
||
/** 标签上方的大写微标签 */
|
||
eyebrow?: string;
|
||
title: ReactNode;
|
||
description?: ReactNode;
|
||
className?: string;
|
||
/** 对齐方式，默认居中（营销区块）；文档面可用 left */
|
||
align?: "center" | "left";
|
||
as?: "h1" | "h2" | "h3";
|
||
}
|
||
|
||
export function SectionHeading({
|
||
eyebrow,
|
||
title,
|
||
description,
|
||
className,
|
||
align = "center",
|
||
as: Heading = "h2",
|
||
}: SectionHeadingProps) {
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"flex flex-col gap-sm",
|
||
align === "center" ? "items-center text-center" : "items-start text-left",
|
||
className,
|
||
)}
|
||
>
|
||
{eyebrow ? (
|
||
<p className="text-micro-uppercase font-semibold uppercase tracking-[0.5px] text-steel">
|
||
{eyebrow}
|
||
</p>
|
||
) : null}
|
||
|
||
<Heading className="text-heading-2 font-semibold text-ink text-balance-pretty">
|
||
{title}
|
||
</Heading>
|
||
|
||
{description ? (
|
||
<p className="max-w-[640px] text-subtitle text-steel text-balance-pretty">
|
||
{description}
|
||
</p>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|