33 lines
847 B
TypeScript
33 lines
847 B
TypeScript
import type { ReactNode } from 'react'
|
|
|
|
export function PageHeader({
|
|
title,
|
|
description,
|
|
eyebrow,
|
|
action
|
|
}: {
|
|
title: string
|
|
description: string
|
|
eyebrow?: string
|
|
action?: ReactNode
|
|
}) {
|
|
return (
|
|
<header className="mb-7 flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
|
|
<div>
|
|
{eyebrow ? (
|
|
<p className="mb-2 text-[10px] font-semibold uppercase tracking-[0.2em] text-cyan-300">
|
|
{eyebrow}
|
|
</p>
|
|
) : null}
|
|
<h1 className="text-2xl font-semibold tracking-[-0.025em] text-[var(--text-strong)] sm:text-[28px]">
|
|
{title}
|
|
</h1>
|
|
<p className="mt-2 max-w-2xl text-sm leading-6 text-[var(--text-muted)]">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
{action ? <div className="shrink-0">{action}</div> : null}
|
|
</header>
|
|
)
|
|
}
|