70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
|
// SkeletonTableFooter.tsx
|
|||
|
|
|
|||
|
|
/** Skeleton del footer de paginación, imita DataTablePagination */
|
|||
|
|
export function SkeletonDataTableFooter({
|
|||
|
|
pageIndex = 0,
|
|||
|
|
pageSize = 10,
|
|||
|
|
totalItems = 0,
|
|||
|
|
}: {
|
|||
|
|
pageIndex?: number; // 0-based
|
|||
|
|
pageSize?: number;
|
|||
|
|
totalItems?: number;
|
|||
|
|
}) {
|
|||
|
|
// Cálculo de rango (1-based visual)
|
|||
|
|
const start = totalItems > 0 ? pageIndex * pageSize + 1 : 0;
|
|||
|
|
const end = totalItems > 0 ? Math.min(start + pageSize - 1, totalItems) : 0;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
role="status"
|
|||
|
|
aria-busy="true"
|
|||
|
|
className="flex items-center justify-between border-t border-border px-4 py-3 bg-background"
|
|||
|
|
>
|
|||
|
|
{/* Izquierda: rango visible */}
|
|||
|
|
<div className="flex flex-col sm:flex-row items-center gap-4 flex-1 text-sm text-muted-foreground">
|
|||
|
|
<span aria-live="polite">
|
|||
|
|
{/* Texto real + shimmer leve para coherencia visual */}
|
|||
|
|
{`Mostrando ${start}–${end} de ${totalItems} registros`}
|
|||
|
|
</span>
|
|||
|
|
|
|||
|
|
{/* 'Filas por página' + trigger del select simulado */}
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<span>Filas por página</span>
|
|||
|
|
<div
|
|||
|
|
className="h-8 w-20 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none"
|
|||
|
|
aria-hidden
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Derecha: controles de paginación simulados */}
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
{/* Primera */}
|
|||
|
|
<div
|
|||
|
|
className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
|
|||
|
|
aria-hidden
|
|||
|
|
/>
|
|||
|
|
{/* Anterior */}
|
|||
|
|
<div
|
|||
|
|
className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
|
|||
|
|
aria-hidden
|
|||
|
|
/>
|
|||
|
|
{/* Indicador de página */}
|
|||
|
|
<div className="h-5 w-28 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none" />
|
|||
|
|
{/* Siguiente */}
|
|||
|
|
<div
|
|||
|
|
className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
|
|||
|
|
aria-hidden
|
|||
|
|
/>
|
|||
|
|
{/* Última */}
|
|||
|
|
<div
|
|||
|
|
className="h-8 w-8 rounded-md bg-foreground/10 animate-pulse motion-reduce:animate-none"
|
|||
|
|
aria-hidden
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<span className="sr-only">Loading pagination…</span>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|