Construye un Panel de KPI en Vivo
Construye un Panel de KPI en Vivo
Todo gran panel de datos comienza con la misma estructura base: una cuadrícula limpia de tarjetas KPI que muestra de un vistazo los números que importan. En esta lección construirás esa estructura: el tipo de diseño al que una API alimentaría métricas en tiempo real.
Dispondrás una cuadrícula responsiva de tarjetas, cada una con una etiqueta de métrica, un valor grande y un indicador de tendencia. Lo estilizaremos como si una fuente de datos en vivo enviara números frescos cada pocos segundos.
Piensa como un analista: el objetivo es la legibilidad instantánea. Quien toma decisiones debe entender el estado del negocio en dos segundos. Construyamos el marco que hace eso posible.
Instrucciones
Agrega un encabezado con un h1 titulado «Live Metrics» para que los usuarios sepan que el panel está impulsado por una API.
Pista: Usa: `<h1 class="text-3xl font-bold">Live Metrics</h1>` dentro de un `<header>`.
¿Dónde va esto?
<!-- Build your KPI dashboard shell here -->Escríbelo en la línea 11: debajo de ese comentario, después del código que ya añadiste.
Crea un contenedor de cuadrícula responsiva para las tarjetas KPI usando la clase grid.
Agrega tarjetas KPI como cajas estilizadas, incluyendo una para «Total Revenue».
Dale a cada tarjeta un fondo tipo tarjeta usando la clase bg-gray-800.
Tu código
Describe lo que quieres construir para este paso y escribiré el código — luego haz clic en Aplicar para llevarlo a tu editor. Este paso: Agrega un encabezado con un h1 titulado «Live Metrics» para que los usuarios sepan que el panel está impulsado por una API.