28 lines
880 B
TypeScript
28 lines
880 B
TypeScript
|
import { type ReactNode } from 'react';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
interface PageHeaderProps {
|
||
|
|
title: string;
|
||
|
|
description?: string;
|
||
|
|
actions?: ReactNode;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Consistent page-level header: title, optional description, and an action
|
||
|
|
* slot (typically buttons — e.g. "New Client", "Export").
|
||
|
|
*/
|
||
|
|
export function PageHeader({ title, description, actions, className }: PageHeaderProps) {
|
||
|
|
return (
|
||
|
|
<div className={cn('flex items-start justify-between gap-4 mb-6', className)}>
|
||
|
|
<div className="min-w-0">
|
||
|
|
<h1 className="text-2xl font-bold text-foreground tracking-tight truncate">{title}</h1>
|
||
|
|
{description && (
|
||
|
|
<p className="mt-1 text-sm text-muted-foreground">{description}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|