675f6f8b35
Hoists hooks above early return (render-time Navigate); ports finance's ConfirmDialog/PageHeader/loading/states + APC error-copy mapper; removes window.confirm, dead appbar search, and seeded fake notifications; wires toasts. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import { type ReactNode } from "react"
|
|
|
|
interface PageHeaderProps {
|
|
title: ReactNode
|
|
description?: ReactNode
|
|
/** Inline indicators after the title (badges, status pills). */
|
|
badges?: ReactNode
|
|
/** Toolbar rendered below the title row — primary actions go here. */
|
|
actions?: ReactNode
|
|
}
|
|
|
|
// Shared page header for the app's main surfaces. Keeps the title/description
|
|
// pattern consistent across routes so forks don't reinvent it per page.
|
|
export function PageHeader({
|
|
title,
|
|
description,
|
|
badges,
|
|
actions,
|
|
}: PageHeaderProps) {
|
|
return (
|
|
<header className="flex flex-col gap-3">
|
|
<div className="flex flex-wrap items-end gap-4">
|
|
<h1 className="text-headline font-semibold tracking-tight">{title}</h1>
|
|
{badges}
|
|
</div>
|
|
{description ? (
|
|
<p className="max-w-2xl text-[15px] leading-relaxed text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
) : null}
|
|
{actions ? (
|
|
<div className="mt-2 flex flex-wrap items-center gap-2">{actions}</div>
|
|
) : null}
|
|
</header>
|
|
)
|
|
}
|