42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
'use client'
|
|
import type { WidgetStatus } from '@/lib/dashboard-types'
|
|
|
|
interface WidgetShellProps {
|
|
title: string
|
|
status: WidgetStatus
|
|
n?: number
|
|
children: React.ReactNode
|
|
colSpan?: number
|
|
}
|
|
|
|
export function WidgetShell({ title, status, n, children, colSpan = 6 }: WidgetShellProps) {
|
|
return (
|
|
<div className={`db-widget db-col-${colSpan}`} style={{ gridColumn: `span ${colSpan}` }}>
|
|
<div className="db-widget-header">
|
|
<h3 className="db-widget-title">{title}</h3>
|
|
{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>
|
|
)
|
|
}
|