Key Metrics Block (Astro)

1---
2import type { KeyMetricsData } from '@contentbit/blocks'
3import type { ValidatedBlockNode } from '@contentbit/core'
4 
5interface Props {
6  node: ValidatedBlockNode<unknown>
7}
8 
9// Static map so Tailwind can see the class names.
10const COLS: Record<number, string> = {
11  1: 'sm:grid-cols-1',
12  2: 'sm:grid-cols-2',
13  3: 'sm:grid-cols-3',
14  4: 'sm:grid-cols-4',
15}
16 
17const { node } = Astro.props
18const data = node.data as KeyMetricsData
19const cols = COLS[Math.min(data.rows.length, 4)]
20---
21 
22<div data-cb-styled class:list={['my-6 grid grid-cols-2 gap-3', cols]}>
23  {
24    data.rows.map((row) => (
25      <div class="bg-card relative overflow-hidden rounded-lg border px-4 pt-4 pb-3.5">
26        <span class="via-foreground/20 absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent to-transparent" aria-hidden="true" />
27        <div class="text-2xl font-bold tracking-tight tabular-nums sm:text-[1.75rem]">{row.value}</div>
28        <div class="text-muted-foreground mt-1 truncate font-mono text-[11px] tracking-wide uppercase">{row.label}</div>
29      </div>
30    ))
31  }
32</div>