feat(frontend): einheitliche Seiten-Header mit Icon-Badge
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.
This commit is contained in:
1 parent
3af56c96fa
commit
60b59c120a
9 files changed
+142
-63
No files matched your search
@@ -0,0 +1,38 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user