Pros & Cons Block (Astro)

1---
2import type { ProsConsData } from '@contentbit/blocks'
3import type { ValidatedBlockNode } from '@contentbit/core'
4import type { AstroBlockContext } from '@contentbit/astro'
5 
6import { splitProsCons } from '@contentbit/blocks'
7 
8interface Props {
9  node: ValidatedBlockNode<unknown>
10  ctx: AstroBlockContext
11}
12 
13const { node, ctx } = Astro.props
14const { pros, cons } = splitProsCons(node.data as ProsConsData)
15const [renderedPros, renderedCons] = await Promise.all([
16  Promise.all(pros.map((item) => ctx.renderMarkdown(item))),
17  Promise.all(cons.map((item) => ctx.renderMarkdown(item))),
18])
19 
20// Inline lucide paths: check, x.
21const CHECK = '<path d="M20 6 9 17l-5-5"/>'
22const X = '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>'
23 
24const columns = [
25  {
26    heading: 'Pros',
27    items: renderedPros,
28    path: CHECK,
29    head: 'bg-emerald-500/[0.07] text-emerald-700 dark:text-emerald-400',
30    mark: 'text-emerald-600 dark:text-emerald-500',
31  },
32  {
33    heading: 'Cons',
34    items: renderedCons,
35    path: X,
36    head: 'bg-rose-500/[0.07] text-rose-700 dark:text-rose-400',
37    mark: 'text-rose-600 dark:text-rose-500',
38  },
39]
40---
41 
42<div data-cb-styled class="my-6 grid gap-3 sm:grid-cols-2">
43  {
44    columns.map((col) => (
45      <div class="bg-card overflow-hidden rounded-lg border">
46        <div class:list={['flex items-center gap-2 border-b px-4 py-2.5', col.head]}>
47          <svg
48            xmlns="http://www.w3.org/2000/svg"
49            viewBox="0 0 24 24"
50            fill="none"
51            stroke="currentColor"
52            stroke-width="3"
53            stroke-linecap="round"
54            stroke-linejoin="round"
55            class="size-3.5"
56            aria-hidden="true"
57            set:html={col.path}
58          />
59          <span class="text-xs font-semibold tracking-wider uppercase">{col.heading}</span>
60        </div>
61        <ul class="list-none space-y-2 p-4 text-sm">
62          {col.items.map((html) => (
63            <li class="flex gap-2.5">
64              <svg
65                xmlns="http://www.w3.org/2000/svg"
66                viewBox="0 0 24 24"
67                fill="none"
68                stroke="currentColor"
69                stroke-width="2.5"
70                stroke-linecap="round"
71                stroke-linejoin="round"
72                class:list={['mt-1 size-3.5 shrink-0', col.mark]}
73                aria-hidden="true"
74                set:html={col.path}
75              />
76              <div class="min-w-0 leading-relaxed [&>p]:m-0" set:html={html} />
77            </li>
78// … truncated