Quick Reference Block

1import { quickRefBlock } from '@contentbit/blocks'
2import { defineBlockComponent } from '@contentbit/react'
3 
4export const QuickRefBlock = defineBlockComponent(quickRefBlock, ({ node }) => {
5  const data = node.data
6  return (
7    <dl data-cb-styled className="bg-card my-6 space-y-2.5 rounded-lg border px-4 py-3.5">
8      {data.rows.map((row, i) => (
9        <div key={i} className="flex items-baseline gap-3">
10          <dt className="text-muted-foreground shrink-0 text-sm">{row.key}</dt>
11          <span
12            className="border-foreground/15 min-w-4 flex-1 self-center border-b border-dotted"
13            aria-hidden
14          />
15          <dd className="text-right text-sm font-medium tabular-nums">{row.value}</dd>
16        </div>
17      ))}
18    </dl>
19  )
20})