kami
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
import type { LucideIcon } from 'lucide-react';
|
|
|
|
interface PageHeaderProps {
|
|
icon?: LucideIcon;
|
|
title: string;
|
|
subtitle?: string;
|
|
/** Optional right-aligned actions (buttons, toggles, etc.). */
|
|
actions?: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Consistent page heading: a gradient title with an optional accent icon chip,
|
|
* subtitle, and right-aligned action slot. Used across the library pages so
|
|
* every screen opens the same way.
|
|
*/
|
|
export function PageHeader({ icon: Icon, title, subtitle, actions }: PageHeaderProps) {
|
|
return (
|
|
<div className="flex items-end justify-between gap-4 animate-rise">
|
|
<div className="flex items-center gap-4 min-w-0">
|
|
{Icon && (
|
|
<div className="flex h-12 w-12 flex-none items-center justify-center rounded-2xl bg-accent/15 text-accent ring-1 ring-accent/25 shadow-lg shadow-accent/10">
|
|
<Icon size={24} />
|
|
</div>
|
|
)}
|
|
<div className="min-w-0">
|
|
<h1 className="text-gradient truncate text-3xl font-extrabold tracking-tight sm:text-4xl">
|
|
{title}
|
|
</h1>
|
|
{subtitle && <p className="mt-1 truncate text-sm text-muted">{subtitle}</p>}
|
|
</div>
|
|
</div>
|
|
{actions && <div className="flex flex-none items-center gap-2">{actions}</div>}
|
|
</div>
|
|
);
|
|
}
|