Dashboard Nidus/Card Info

Card Info

Tarjeta de métrica para el dashboard de administración. Muestra un ícono, una etiqueta descriptiva y un valor numérico o de texto. Soporta estado vacío cuando no hay datos disponibles.

Estado con datos

Muestra el valor cuando hay información disponible.

Total de respuestas

Estado vacío

Cuando value es undefined, null o "", se muestra el texto de emptyText.

Total de respuestas

Sin información

Color de ícono personalizado

El fondo del contenedor de ícono es configurable con cualquier clase de Tailwind.

Verde

Naranja

Azul

Props

Interfaz pública del componente DashboardCardInfo.

Prop	Tipo	Default	Descripción
`label`	`string`	`—`	Etiqueta descriptiva de la métrica (e.g. "Total de respuestas").
`value`	`string \| number`	`undefined`	Valor a mostrar. Si es undefined/null/"" se activa el estado vacío.
`icon`	`React.ElementType`	`—`	Componente de ícono (e.g. Phone de @repo/icons).
`iconBg`	`string`	`"bg-blue-50"`	Clase Tailwind para el fondo del contenedor del ícono.
`emptyText`	`string`	`"Sin información"`	Texto mostrado cuando value está vacío.

Uso

Importar desde @repo/ui.

import { DashboardCardInfo } from '@repo/ui';
import { Phone } from '@repo/icons';

<DashboardCardInfo
  label="Total de respuestas"
  value={15}
  icon={Phone}
  iconBg="bg-blue-50"
/>