Stat Card

Il pattern a piastrella KPI — icona in un box + etichetta, un numero grande in grassetto, una linea di tendenza colorata su/giù sotto. changePct guida automaticamente il colore/l'icona della tendenza: verde+su per positivo, rosso+giù per negativo.

import { StatCard } from "@pompeitech/vesuvius-ui";

Default

Ricavi totali

$45,231.89

+12.4%vs last month

Valore medio ordine

$68.20

-1.8%vs last month

Con un elemento visivo di tendenza

trend accetta qualsiasi ReactNode — tipicamente una Sparkline — così StatCard non deve dipendere dal modulo dei grafici stesso.

Vendite medie

837

+1.3%rispetto al mese scorso

API

StatCard

Prop	Tipo	Default	Descrizione
`label`	`string`
`value`	`ReactNode`		La cifra in evidenza.
`icon`	`LucideIcon`		Icona in un box opzionale accanto all'etichetta.
`changePct`	`number`		ad es. `12.4` o `-3.2` — guida automaticamente il colore e la freccia su/giù del badge di tendenza.
`changeLabel`	`string`	`"vs last month"`	Testo dopo la percentuale.
`trend`	`ReactNode`		Un elemento visivo inline, ad es. uno `Sparkline`.

Più ogni prop nativa di <div> sulla radice.