83ba47ab8f
- Card 新增 tone(panel/card/soft)/flat/interactive；cardClass 兼容旧字符串签名 - Button 新增 link(coral 文字链) 变体与 lg 尺寸 - 新增原子件 Eyebrow(统一眉题) / StatusDot(状态点·读屏可见) / Skeleton(motion-safe 占位) / Meter(进度条·progressbar) - PageHeader/SectionHeader 用 display/title 字阶 + Eyebrow 眉题
37 lines
888 B
TypeScript
37 lines
888 B
TypeScript
import type { ReactNode } from "react";
|
|
|
|
import { Eyebrow } from "./Eyebrow";
|
|
|
|
interface PageHeaderProps {
|
|
title: string;
|
|
eyebrow?: string;
|
|
description?: string;
|
|
actions?: ReactNode;
|
|
}
|
|
|
|
export function PageHeader({
|
|
title,
|
|
eyebrow,
|
|
description,
|
|
actions,
|
|
}: PageHeaderProps) {
|
|
return (
|
|
<header className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
|
<div>
|
|
{eyebrow ? <Eyebrow className="mb-1.5">{eyebrow}</Eyebrow> : null}
|
|
<h1 className="font-serif text-display-sm text-ink">{title}</h1>
|
|
{description ? (
|
|
<p className="mt-2 max-w-2xl text-sm leading-6 text-ink-soft">
|
|
{description}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
{actions ? (
|
|
<div className="flex shrink-0 flex-wrap items-center gap-2">
|
|
{actions}
|
|
</div>
|
|
) : null}
|
|
</header>
|
|
);
|
|
}
|