FAQ Block (Astro)

1---
2import type { FaqData, FaqItemData } from '@contentbit/blocks'
3import type { ValidatedBlockNode } from '@contentbit/core'
4import type { AstroBlockContext } from '@contentbit/astro'
5 
6import { isValidatedBlock } from '@contentbit/core'
7 
8interface Props {
9  node: ValidatedBlockNode<unknown>
10  ctx: AstroBlockContext
11}
12 
13const { node, ctx } = Astro.props
14const data = node.data as FaqData
15const items = await Promise.all(
16  data.blocks.map(async (item) => ({
17    question: String(item.props.question),
18    html: await ctx.renderMarkdown(isValidatedBlock(item) ? (item.data as FaqItemData).markdown : item.body),
19  })),
20)
21 
22// Inline lucide path: chevron-down.
23const CHEVRON = '<path d="m6 9 6 6 6-6"/>'
24 
25// Native <details> means items open independently (the React pack's accordion
26// is single-open). Add name="faq" to the <details> elements for exclusivity.
27---
28 
29<div data-cb-styled class="bg-card my-6 rounded-lg border px-4">
30  {
31    items.map((item, i) => (
32      <details class:list={['group', i < items.length - 1 && 'border-b']}>
33        <summary class="flex cursor-pointer list-none items-center justify-between gap-4 py-4 text-left text-sm font-medium [&::-webkit-details-marker]:hidden">
34          {item.question}
35          <svg
36            xmlns="http://www.w3.org/2000/svg"
37            viewBox="0 0 24 24"
38            fill="none"
39            stroke="currentColor"
40            stroke-width="2"
41            stroke-linecap="round"
42            stroke-linejoin="round"
43            class="text-muted-foreground size-4 shrink-0 transition-transform group-open:rotate-180"
44            aria-hidden="true"
45            set:html={CHEVRON}
46          />
47        </summary>
48        <div class="text-muted-foreground pb-4 text-sm leading-relaxed" set:html={item.html} />
49      </details>
50    ))
51  }
52</div>