Steps Block

1import { stepsBlock } from '@contentbit/blocks'
2import { defineBlockComponent } from '@contentbit/react'
3 
4export const StepsBlock = defineBlockComponent(stepsBlock, ({ node, ctx }) => {
5  const data = node.data
6  const last = data.items.length - 1
7  return (
8    <ol data-cb-styled className="my-6">
9      {data.items.map((item, i) => (
10        <li key={i} className="relative flex gap-4 pb-7 last:pb-0">
11          {i < last ? (
12            <span className="bg-border absolute top-7 bottom-1 left-[13px] w-px" aria-hidden />
13          ) : null}
14          <span className="bg-card text-foreground z-10 flex size-7 shrink-0 items-center justify-center rounded-full border font-mono text-xs font-semibold shadow-sm">
15            {i + 1}
16          </span>
17          {/* Step text is Markdown — inline code and emphasis are common. */}
18          <div className="min-w-0 pt-1 text-sm leading-relaxed [&>p]:m-0 [&>p+p]:mt-2">
19            {ctx.renderMarkdown(item.text)}
20          </div>
21        </li>
22      ))}
23    </ol>
24  )
25})