Key Metrics Block

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