51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
import { Button } from '@repo/shadcn-ui/components';
|
|
import { cn } from '@repo/shadcn-ui/lib/utils';
|
|
import { ChevronLeftIcon } from 'lucide-react';
|
|
// 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;
|
|
|
|
className?: string;
|
|
}
|
|
|
|
export function PageHeader({ icon, title, description, status, rightSlot, className }: PageHeaderProps) {
|
|
return (
|
|
<div className={cn("border-b bg-card -px-4 pt-4", className)}>
|
|
<div className="mx-auto px-6 py-4">
|
|
<div className='flex items-center justify-between'>
|
|
{/* Lado izquierdo */}
|
|
<div className='flex items-center gap-4'>
|
|
<Button variant="ghost" size="icon" className="cursor-pointer" onClick={() => window.history.back()}>
|
|
<ChevronLeftIcon className="size-5" />
|
|
</Button>
|
|
{icon && <div className='shrink-0'>{icon}</div>}
|
|
|
|
<div>
|
|
<div className='flex items-center gap-3'>
|
|
<h1 className='text-xl 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>
|
|
);
|
|
}
|