Создайте каркас живого KPI-дашборда
Создайте каркас живого KPI-дашборда
Каждый отличный дашборд начинается с одного и того же фундамента: аккуратная сетка KPI-карточек, которая показывает нужные цифры с первого взгляда. В этом уроке вы построите именно такой каркас — тот вид макета, в который API будет передавать метрики в реальном времени.
Вы создадите адаптивную сетку карточек, каждая из которых показывает название метрики, крупное значение и индикатор тренда. Мы оформим всё так, будто живой источник данных обновляет цифры каждые несколько секунд.
Думайте как аналитик: цель — мгновенная читаемость. Человек, принимающий решения, должен понять состояние бизнеса за две секунды. Давайте построим рамку, которая делает это возможным.
Инструкции
Добавьте заголовок с тегом h1 «Live Metrics», чтобы пользователи знали, что дашборд получает данные из API.
Подсказка: Используйте: `<h1 class="text-3xl font-bold">Live Metrics</h1>` внутри тега `<header>`.
Куда это писать?
<!-- Build your KPI dashboard shell here -->Пишите в строке 11 — под тем комментарием, после уже добавленного кода.
Создайте адаптивный контейнер-сетку для KPI-карточек с помощью класса grid.
Добавьте KPI-карточки в виде стилизованных блоков, включая карточку «Total Revenue».
Придайте каждой карточке фоновый стиль с помощью класса bg-gray-800.
Ваш код
Опишите, что хотите создать на этом шаге, и я напишу код — затем нажмите «Применить», чтобы вставить его в редактор. Текущий шаг: Добавьте заголовок с тегом h1 «Live Metrics», чтобы пользователи знали, что дашборд получает данные из API.