FAQ Block

1import { faqBlock, type FaqItemData } from '@contentbit/blocks'
2import { defineBlockComponent } from '@contentbit/react'
3 
4import {
5  Accordion,
6  AccordionContent,
7  AccordionItem,
8  AccordionTrigger,
9} from '@/components/ui/accordion'
10import { isValidatedBlock } from '@contentbit/core'
11 
12export const FaqBlock = defineBlockComponent(faqBlock, ({ node, ctx }) => {
13  const data = node.data
14  return (
15    <div data-cb-styled className="bg-card my-6 rounded-lg border px-4">
16      <Accordion type="single" collapsible>
17        {data.blocks.map((item, i) => (
18          <AccordionItem
19            key={i}
20            value={`item-${i}`}
21            className={i === data.blocks.length - 1 ? 'border-b-0' : undefined}
22          >
23            <AccordionTrigger className="text-left text-sm font-medium hover:no-underline">
24              {String(item.props.question)}
25            </AccordionTrigger>
26            <AccordionContent className="text-muted-foreground text-sm leading-relaxed">
27              {ctx.renderMarkdown(
28                isValidatedBlock(item) ? (item.data as FaqItemData).markdown : item.body,
29              )}
30            </AccordionContent>
31          </AccordionItem>
32        ))}
33      </Accordion>
34    </div>
35  )
36})