Comparison Block (Astro)

1---
2import type { ComparisonData } from '@contentbit/blocks'
3import type { ValidatedBlockNode } from '@contentbit/core'
4 
5interface Props {
6  node: ValidatedBlockNode<unknown>
7  left?: string
8  right?: string
9}
10 
11const { node, left, right } = Astro.props
12const data = node.data as ComparisonData
13---
14 
15<div data-cb-styled class="bg-card my-6 overflow-x-auto rounded-lg border">
16  <table class="w-full text-sm">
17    <thead>
18      <tr class="bg-muted/50 border-b">
19        <th scope="col" class="w-[28%] px-4 py-3 text-left font-medium" />
20        <th scope="col" class="px-4 py-3 text-left"><span class="font-semibold">{left}</span></th>
21        <th scope="col" class="px-4 py-3 text-left"><span class="font-semibold">{right}</span></th>
22      </tr>
23    </thead>
24    <tbody class="divide-y">
25      {
26        data.rows.map((row) => (
27          <tr class="hover:bg-muted/30 transition-colors">
28            <th scope="row" class="text-muted-foreground px-4 py-3 text-left text-[13px] font-medium">
29              {row.label}
30            </th>
31            <td class="px-4 py-3 tabular-nums">{row.left}</td>
32            <td class="px-4 py-3 tabular-nums">{row.right}</td>
33          </tr>
34        ))
35      }
36    </tbody>
37  </table>
38</div>