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 眉题
35 lines
861 B
TypeScript
35 lines
861 B
TypeScript
import type { ReactNode } from "react";
|
|
|
|
import { cn } from "@/lib/ui/variants";
|
|
|
|
import { Eyebrow } from "./Eyebrow";
|
|
|
|
interface SectionHeaderProps {
|
|
title: string;
|
|
eyebrow?: string;
|
|
description?: ReactNode;
|
|
action?: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function SectionHeader({
|
|
title,
|
|
eyebrow,
|
|
description,
|
|
action,
|
|
className,
|
|
}: SectionHeaderProps) {
|
|
return (
|
|
<div className={cn("flex items-start justify-between gap-4", className)}>
|
|
<div className="min-w-0">
|
|
{eyebrow ? <Eyebrow className="mb-1">{eyebrow}</Eyebrow> : null}
|
|
<h2 className="font-serif text-title-md text-ink">{title}</h2>
|
|
{description ? (
|
|
<p className="mt-1 text-sm leading-6 text-ink-soft">{description}</p>
|
|
) : null}
|
|
</div>
|
|
{action ? <div className="shrink-0">{action}</div> : null}
|
|
</div>
|
|
);
|
|
}
|