Baue ein Live-KPI-Dashboard-Grundgerüst
Baue ein Live-KPI-Dashboard-Grundgerüst
Jedes großartige Daten-Dashboard beginnt mit demselben Rückgrat: einem sauberen Raster aus KPI-Karten, das die wichtigsten Zahlen auf einen Blick sichtbar macht. In dieser Lektion baust du dieses Grundgerüst — genau die Art Layout, in das eine API Echtzeit-Metriken einspeisen würde.
Du legst ein responsives Karten-Raster an; jede Karte zeigt ein Metrik-Label, einen großen Wert und einen Trend-Indikator. Wir stylen alles so, als würde eine Live-Datenquelle alle paar Sekunden frische Zahlen liefern.
Denke wie ein Analyst: Das Ziel ist sofortige Lesbarkeit. Wer entscheidet, sollte den Zustand des Geschäfts in zwei Sekunden erfassen. Bauen wir den Rahmen, der das möglich macht.
Anweisungen
Füge einen Header mit einem h1-Titel „Live-Metriken“ hinzu, damit Nutzer wissen, dass das Dashboard API-gestützt ist.
Tipp: Nutze: `<h1 class="text-3xl font-bold">Live-Metriken</h1>` innerhalb eines `<header>`.
Wo kommt das hin?
<!-- Baue hier dein KPI-Dashboard-Grundgerüst -->Schreib es in Zeile 11 — unter diesem Kommentar, nach dem Code, den du schon ergänzt hast.
Erstelle einen responsiven Grid-Container für die KPI-Karten mit der grid-Klasse.
Füge KPI-Karten als gestylte Boxen hinzu, darunter eine für „Gesamtumsatz“.
Gib jeder Karte einen kartenartigen Hintergrund mit der Klasse bg-gray-800.
Dein Code
Beschreibe, was du für diesen Schritt bauen willst, und ich schreibe den Code — klicke dann auf Übernehmen, um ihn in deinen Editor zu übertragen. Dieser Schritt: Füge einen Header mit einem h1-Titel „Live-Metriken“ hinzu, damit Nutzer wissen, dass das Dashboard API-gestützt ist.