Pros & Cons Block

1import type { BlockRenderContext } from '@contentbit/react'
2 
3import { prosConsBlock, splitProsCons } from '@contentbit/blocks'
4import { defineBlockComponent } from '@contentbit/react'
5import { Check, X } from 'lucide-react'
6 
7function Column({
8  heading,
9  items,
10  tone,
11  ctx,
12}: {
13  heading: string
14  items: string[]
15  tone: 'pro' | 'con'
16  ctx: BlockRenderContext
17}) {
18  const Icon = tone === 'pro' ? Check : X
19  const head =
20    tone === 'pro'
21      ? 'bg-emerald-500/[0.07] text-emerald-700 dark:text-emerald-400'
22      : 'bg-rose-500/[0.07] text-rose-700 dark:text-rose-400'
23  const mark =
24    tone === 'pro' ? 'text-emerald-600 dark:text-emerald-500' : 'text-rose-600 dark:text-rose-500'
25  return (
26    <div className="bg-card overflow-hidden rounded-lg border">
27      <div className={`flex items-center gap-2 border-b px-4 py-2.5 ${head}`}>
28        <Icon className="size-3.5" aria-hidden strokeWidth={3} />
29        <span className="text-xs font-semibold tracking-wider uppercase">{heading}</span>
30      </div>
31      <ul className="space-y-2 p-4 text-sm">
32        {items.map((text, i) => (
33          <li key={i} className="flex gap-2.5">
34            <Icon className={`mt-1 size-3.5 shrink-0 ${mark}`} aria-hidden />
35            {/* Item text is Markdown — render it, with paragraph margins zeroed. */}
36            <div className="min-w-0 leading-relaxed [&>p]:m-0">{ctx.renderMarkdown(text)}</div>
37          </li>
38        ))}
39      </ul>
40    </div>
41  )
42}
43 
44export const ProsConsBlock = defineBlockComponent(prosConsBlock, ({ node, ctx }) => {
45  const { pros, cons } = splitProsCons(node.data)
46  return (
47    <div data-cb-styled className="my-6 grid gap-3 sm:grid-cols-2">
48      <Column heading="Pros" items={pros} tone="pro" ctx={ctx} />
49      <Column heading="Cons" items={cons} tone="con" ctx={ctx} />
50    </div>
51  )
52})