faqs-3

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