39 lines
934 B
TypeScript
39 lines
934 B
TypeScript
import type { ReactNode } from "react";
|
|
|
|
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 ? (
|
|
<p className="mb-1 font-mono text-xs uppercase tracking-wide text-ink-soft/70">
|
|
{eyebrow}
|
|
</p>
|
|
) : null}
|
|
<h1 className="font-serif text-2xl 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>
|
|
);
|
|
}
|