29 行
1.0 KiB
TypeScript
29 行
1.0 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
import { cn } from "../../lib/utils";
|
|
|
|
type PageHeaderProps = {
|
|
title: string;
|
|
subtitle?: string;
|
|
actions?: ReactNode;
|
|
eyebrow?: string;
|
|
meta?: ReactNode;
|
|
className?: string;
|
|
};
|
|
|
|
export function PageHeader({ title, subtitle, actions, eyebrow, meta, className }: PageHeaderProps) {
|
|
return (
|
|
<header className={cn("flex flex-wrap items-start justify-between gap-4", className)}>
|
|
<div className="min-w-0 max-w-3xl">
|
|
{eyebrow ? (
|
|
<div className="text-xs font-bold uppercase tracking-[0.2em] text-primary">{eyebrow}</div>
|
|
) : null}
|
|
<h2 className="mt-1 text-[2rem] font-semibold tracking-tight text-[var(--color-text-primary)]">{title}</h2>
|
|
{subtitle ? <p className="mt-2 text-sm leading-6 text-[var(--color-text-secondary)]">{subtitle}</p> : null}
|
|
{meta ? <div className="mt-3 flex flex-wrap gap-2">{meta}</div> : null}
|
|
</div>
|
|
{actions ? <div className="flex shrink-0 flex-wrap gap-2">{actions}</div> : null}
|
|
</header>
|
|
);
|
|
}
|