Comparison Block

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