mirror of
https://github.com/escalante29/WealthySmart.git
synced 2026-07-17 14:28:47 +02:00
a95486481b
- PageHeader + StatTile standardize the four header and three stat-tile variants found in the audit; Inicio and Salarios migrated as proof. - chart tokens replaced with a teal-anchored categorical scale, CVD- ordered and validated (six checks, light + dark surfaces). - Registry adds: empty, field, item, spinner, progress, toggle-group, input-group, popover, kbd (+ toggle dep). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import type { LucideIcon } from "lucide-react";
|
|
|
|
/** Standard page header: icon tile + title + optional subtitle on the left,
|
|
* page-level actions (period navigators, CSV, refresh…) on the right.
|
|
* Every page uses this — the breadcrumb in the shell header stays the only
|
|
* other place a page identifies itself. */
|
|
export function PageHeader({
|
|
icon: Icon,
|
|
title,
|
|
subtitle,
|
|
actions,
|
|
}: {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
subtitle?: string;
|
|
actions?: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
|
<Icon className="size-5" aria-hidden />
|
|
</div>
|
|
<div>
|
|
<h1
|
|
className="text-2xl font-bold tracking-tight"
|
|
style={{ fontFamily: "var(--font-heading)" }}
|
|
>
|
|
{title}
|
|
</h1>
|
|
{subtitle && (
|
|
<p className="text-sm text-muted-foreground">{subtitle}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{actions && (
|
|
<div className="flex items-center gap-2">{actions}</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|