faqs-4

1---
2import { cn } from "@/lib/utils"
3import {
4  Accordion,
5  AccordionContent,
6  AccordionItem,
7  AccordionTrigger,
8} from "@/components/ui/accordion"
9import { Section, SectionContainer } from "@/components/ui/section"
10 
11type Props = {
12  class?: string
13  title: string
14  faqs: {
15    id: string
16    question: string
17    answer: string
18  }[]
19}
20 
21const { class: className, title, faqs } = Astro.props
22---
23 
24<Section class={cn("", className)}>
25  <SectionContainer class="items-center">
26    <div class="mx-auto w-full max-w-3xl">
27      <h2
28        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
29      >
30        {title}
31      </h2>
32      <div class="mt-10">
33        <Accordion collapsible>
34          {
35            faqs.map((item) => (
36              <AccordionItem value={item.id}>
37                <AccordionTrigger>{item.question}</AccordionTrigger>
38                <AccordionContent>{item.answer}</AccordionContent>
39              </AccordionItem>
40            ))
41          }
42        </Accordion>
43      </div>
44    </div>
45  </SectionContainer>
46</Section>