componente · @solu30/ui-kit/display

StatCard

Tarjeta de estadística con ícono en recuadro, valor y tendencia; los colores del ícono se pasan sueltos.

12 sitios de import en 5 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
carlosmartinpavon
cmp-packages
gestorsalon
luigi

El componente, montado

Cargando el espécimen…

Éste es el conjunto completo. Abajo, los mismos casos por separado, cada uno con su código.

Cómo se usa

import { StatCard } from '@solu30/ui-kit/display'

Props

8 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
icon	sí	`React.ComponentType<{ className?: string; }>`	Icon component
iconColor	opcional	`string`	Icon CSS color
iconBg	opcional	`string`	Icon background CSS color/class
title	sí	`string`	Card title
value	sí	`ReactNode`	Main value (number or string)
description	opcional	`string`	Description text below value
trend	opcional	`{ value: number; label?: string; direction: "up" \| "down"; }`	Trend indicator
className	opcional	`string`	—

Con tendencia

Cuando la cifra necesita ícono, color propio y comparación contra el período anterior — pocas métricas grandes en un dashboard, cada una compitiendo por atención.

Cargando el espécimen…

export function StatCardEjemplo() {
  return (
    <Row>
      <StatCard
        icon={IconChart}
        iconColor="text-primary"
        iconBg="bg-primary/10"
        title="Ocupación del salón"
        value="87%"
        description="agosto, fines de semana"
        trend={{ value: 12, label: 'vs. julio', direction: 'up' }}
      />
      <StatCard
        icon={IconAnchor}
        iconColor="text-red"
        iconBg="bg-red/10"
        title="Salidas canceladas"
        value={3}
        description="por clima, agosto"
        trend={{ value: 2, direction: 'down' }}
      />
    </Row>
  )
}

De specimens/display.tsx · StatCardEjemplo: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Ejemplo del paquete

<StatCard icon={Users} title="Invitados" value={1840} description="En 12 eventos"
  trend={{ value: 8, direction: 'up', label: 'vs. julio' }} />

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.