Отображение данных statsdashboarddata

Metric Grid

Сетка аналитических показателей дашборда с крупными цифрами и динамикой роста.

Users

12.4k

+12%

Revenue

$48k

+5%

Bounce

24%

-2%

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

---
import { MetricGrid } from 'astro-component-kit';
---

<StatsGridDashboard>Content</StatsGridDashboard>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/MetricGrid.astro:

---
---
<div class="s-grid">
  <div class="s-card"><span>Users</span><h3>12.4k</h3><small class="up">+12%</small></div>
  <div class="s-card"><span>Revenue</span><h3>$48k</h3><small class="up">+5%</small></div>
  <div class="s-card"><span>Bounce</span><h3>24%</h3><small class="down">-2%</small></div>
</div>
<style>
  .s-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
  .s-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.1); padding: 1.25rem; border-radius: 12px; }
  span { font-size: 0.75rem; color: #64748b; font-weight: 600; text-transform: uppercase; }
  h3 { font-size: 1.5rem; color: #fff; margin: 0.25rem 0; }
  small { font-size: 0.7rem; font-weight: 700; }
  .up { color: #10b981; }
  .down { color: #ef4444; }
</style>

Краткая информация

Категория: Отображение данных
Имя файла: MetricGrid.astro
Зависимости: Нет — чистый Astro + CSS
Теги: statsdashboarddata