Quick Reference Block (Astro)

1---
2import type { QuickRefData } from '@contentbit/blocks'
3import type { ValidatedBlockNode } from '@contentbit/core'
4 
5interface Props {
6  node: ValidatedBlockNode<unknown>
7}
8 
9const { node } = Astro.props
10const data = node.data as QuickRefData
11---
12 
13<dl data-cb-styled class="bg-card my-6 space-y-2.5 rounded-lg border px-4 py-3.5">
14  {
15    data.rows.map((row) => (
16      <div class="flex items-baseline gap-3">
17        <dt class="text-muted-foreground shrink-0 text-sm">{row.key}</dt>
18        <span class="border-foreground/15 min-w-4 flex-1 self-center border-b border-dotted" aria-hidden="true" />
19        <dd class="text-right text-sm font-medium tabular-nums">{row.value}</dd>
20      </div>
21    ))
22  }
23</dl>