22 lines
671 B
TypeScript
22 lines
671 B
TypeScript
|
interface PageHeaderProps {
|
||
|
|
eyebrow?: string;
|
||
|
|
title: string;
|
||
|
|
description?: string;
|
||
|
|
action?: React.ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function PageHeader({ eyebrow, title, description, action }: PageHeaderProps) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`animate-fade-in flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between ${description ? "mb-5" : "mb-4"}`}
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
{eyebrow && <p className="page-eyebrow mb-1.5">{eyebrow}</p>}
|
||
|
|
<h1 className="page-title">{title}</h1>
|
||
|
|
{description && <p className="page-lead">{description}</p>}
|
||
|
|
</div>
|
||
|
|
{action && <div className="w-full shrink-0 sm:w-auto">{action}</div>}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|