Nick Szaunig
60b59c120a
Neue PageHeader-Komponente (Gradient-Icon-Badge + Titel + Beschreibung + Aktionen) ersetzt die nackten <h1>-Zeilen auf den meistgenutzten Seiten (Voelker, Bienenstaende, Koeniginnen, Aufgaben, Honigchargen, Statistik, Webhooks, Benutzerverwaltung). Gradient variiert pro Bereich (Honig/Salbei/Himmel), passend zum jeweiligen Sidebar-Icon.
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import { ReactNode } from "react";
|
|
import type { LucideIcon } from "lucide-react";
|
|
|
|
interface PageHeaderProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description?: string;
|
|
gradient?: string;
|
|
actions?: ReactNode;
|
|
}
|
|
|
|
export function PageHeader({
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
gradient = "var(--gradient-honey)",
|
|
actions,
|
|
}: PageHeaderProps) {
|
|
return (
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="flex items-center gap-3">
|
|
<span
|
|
className="flex size-10 shrink-0 items-center justify-center rounded-xl text-white shadow-[var(--shadow-soft)]"
|
|
style={{ background: gradient }}
|
|
>
|
|
<Icon className="size-5" />
|
|
</span>
|
|
<div>
|
|
<h1 className="font-heading text-2xl font-semibold tracking-tight">{title}</h1>
|
|
{description ? (
|
|
<p className="text-sm text-muted-foreground">{description}</p>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
{actions ? <div className="flex flex-wrap gap-2">{actions}</div> : null}
|
|
</div>
|
|
);
|
|
}
|