42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
|
// features/common/components/page-header.tsx
|
||
|
|
import type { ReactNode } from "react";
|
||
|
|
import { CustomerInvoiceStatusBadge } from "./customer-invoice-status-badge";
|
||
|
|
|
||
|
|
interface PageHeaderProps {
|
||
|
|
/** Icono que aparece a la izquierda del título */
|
||
|
|
icon?: ReactNode;
|
||
|
|
/** Contenido del título (texto plano o nodo complejo) */
|
||
|
|
title: ReactNode;
|
||
|
|
/** Descripción secundaria debajo del título */
|
||
|
|
description?: ReactNode;
|
||
|
|
/** Estado opcional (ej. "draft", "paid") */
|
||
|
|
status?: string;
|
||
|
|
/** Contenido del lado derecho (botones, menús, etc.) */
|
||
|
|
rightSlot?: ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function PageHeader({ icon, title, description, status, rightSlot }: PageHeaderProps) {
|
||
|
|
return (
|
||
|
|
<div className='border-b bg-card -px-4'>
|
||
|
|
<div className='mx-auto w-full px-6 pt-2 pb-8'>
|
||
|
|
<div className='flex items-center justify-between'>
|
||
|
|
{/* Lado izquierdo */}
|
||
|
|
<div className='flex items-center gap-3'>
|
||
|
|
{icon && <div className='shrink-0'>{icon}</div>}
|
||
|
|
<div>
|
||
|
|
<div className='flex items-center gap-3'>
|
||
|
|
<h1 className='text-2xl font-semibold text-foreground'>{title}</h1>
|
||
|
|
{status && <CustomerInvoiceStatusBadge status={status} />}
|
||
|
|
</div>
|
||
|
|
{description && <p className='text-sm text-muted-foreground'>{description}</p>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Lado derecho parametrizable */}
|
||
|
|
{rightSlot && <div>{rightSlot}</div>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|