Costruisci la struttura di una dashboard KPI live
Costruisci la struttura di una dashboard KPI live
Ogni grande dashboard dati parte dalla stessa ossatura: una griglia pulita di card KPI che mette in evidenza a colpo d'occhio i numeri che contano. In questa lezione costruirai quella struttura — il tipo di layout in cui un'API riverserebbe metriche in tempo reale.
Disporrai una griglia responsive di card, ognuna con l'etichetta della metrica, un valore in grande e un indicatore di tendenza. La stileremo come se una sorgente dati live spingesse numeri freschi ogni pochi secondi.
Pensa da analista: l'obiettivo è la leggibilità immediata. Chi prende le decisioni deve cogliere lo stato del business in due secondi. Costruiamo la cornice che lo rende possibile.
Istruzioni
Aggiungi un header con un h1 intitolato "Metriche live" così gli utenti sanno che la dashboard è alimentata da un'API.
Suggerimento: Usa: `<h1 class="text-3xl font-bold">Metriche live</h1>` dentro un `<header>`.
Dove va scritto?
<!-- Costruisci qui la struttura della tua dashboard KPI -->Scrivilo alla riga 11: sotto quel commento, dopo il codice che hai già aggiunto.
Crea un contenitore a griglia responsive per le card KPI usando la classe grid.
Aggiungi le card KPI come riquadri stilizzati, inclusa una per "Ricavi totali".
Dai a ogni card uno sfondo in stile card usando la classe bg-gray-800.
Il tuo codice
Descrivi ciò che vuoi creare per questo passaggio e scriverò il codice — poi clicca su Applica per inserirlo nel tuo editor. Questo passaggio: Aggiungi un header con un h1 intitolato "Metriche live" così gli utenti sanno che la dashboard è alimentata da un'API.