51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
'use client'
|
|
import type { WidgetStatus } from '@/lib/dashboard-types'
|
|
|
|
interface WidgetShellProps {
|
|
title: string
|
|
subtitle?: string
|
|
status: WidgetStatus
|
|
n?: number
|
|
children: React.ReactNode
|
|
colSpan?: number
|
|
/** 'star' resalta la card (borde + fondo distinto) para métricas destacadas. */
|
|
variant?: 'star'
|
|
}
|
|
|
|
export function WidgetShell({ title, subtitle, status, n, children, colSpan = 6, variant }: WidgetShellProps) {
|
|
return (
|
|
<div
|
|
className={`db-widget db-col-${colSpan}${variant === 'star' ? ' db-widget-star' : ''}`}
|
|
style={{ gridColumn: `span ${colSpan}` }}
|
|
>
|
|
<div className="db-widget-header">
|
|
<div className="db-widget-title-group">
|
|
<h3 className="db-widget-title">{title}</h3>
|
|
{subtitle && <p className="db-widget-subtitle">{subtitle}</p>}
|
|
</div>
|
|
{n !== undefined && status === 'ok' && (
|
|
<span className="db-widget-n">n = {n.toLocaleString('es-PY')}</span>
|
|
)}
|
|
</div>
|
|
<div className="db-widget-body">
|
|
{status === 'loading' && (
|
|
<div className="db-skeleton-block" aria-label="Cargando…" aria-busy="true" />
|
|
)}
|
|
{status === 'suppressed' && (
|
|
<div className="db-suppressed" role="status">
|
|
<span className="db-suppressed-icon">🔒</span>
|
|
<p>Datos insuficientes</p>
|
|
<p className="db-suppressed-hint">Se necesitan al menos 5 respuestas en este corte.</p>
|
|
</div>
|
|
)}
|
|
{status === 'error' && (
|
|
<div className="db-suppressed" role="alert">
|
|
<p>Error al cargar los datos.</p>
|
|
</div>
|
|
)}
|
|
{status === 'ok' && children}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|