| type PageHeaderProps = { | |
| eyebrow?: string; | |
| title: string; | |
| description: string; | |
| action?: React.ReactNode; | |
| }; | |
| export function PageHeader({ eyebrow, title, description, action }: PageHeaderProps) { | |
| return ( | |
| <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between"> | |
| <div className="max-w-3xl"> | |
| {eyebrow ? ( | |
| <p className="section-label text-[var(--accent-primary)]">{eyebrow}</p> | |
| ) : null} | |
| <h1 className="mt-2 text-[24px] font-bold tracking-[-0.02em] text-[var(--text-primary)]">{title}</h1> | |
| <p className="mt-2 text-[14px] leading-relaxed text-[var(--text-secondary)]">{description}</p> | |
| </div> | |
| {action ? <div className="shrink-0">{action}</div> : null} | |
| </div> | |
| ); | |
| } | |