Construa a Estrutura de um Dashboard de KPIs ao Vivo
Construa a Estrutura de um Dashboard de KPIs ao Vivo
Todo grande dashboard de dados começa com a mesma espinha dorsal: uma grade limpa de cards de KPI que mostram, num relance, os números que importam. Nesta lição você vai construir essa estrutura — o tipo de layout que uma API alimentaria com métricas em tempo real.
Você vai montar uma grade responsiva de cards, cada um exibindo o rótulo da métrica, um valor em destaque e um indicador de tendência. Vamos estilizar tudo como se uma fonte de dados ao vivo enviasse números novos a cada poucos segundos.
Pense como um analista: o objetivo é legibilidade instantânea. Quem toma decisões deve captar o estado do negócio em dois segundos. Vamos construir a moldura que torna isso possível.
Instruções
Adicione um cabeçalho com um h1 intitulado "Métricas ao Vivo" para que os usuários saibam que o dashboard é alimentado pela API.
Dica: Use: `<h1 class="text-3xl font-bold">Métricas ao Vivo</h1>` dentro de um `<header>`.
Onde é que isto entra?
<!-- Construa aqui a estrutura do seu dashboard de KPIs -->Escreva na linha 11 — abaixo desse comentário, depois do código que já adicionou.
Crie um contêiner de grade responsiva para os cards de KPI usando a classe grid.
Adicione cards de KPI como caixas estilizadas, incluindo um para "Receita Total".
Dê a cada card um fundo de card usando a classe bg-gray-800.
Seu Código
Descreva o que você quer construir para esta etapa e eu escrevo o código — depois clique em Aplicar para inseri-lo no seu editor. Esta etapa: Adicione um cabeçalho com um h1 intitulado "Métricas ao Vivo" para que os usuários saibam que o dashboard é alimentado pela API.