faqs-1

1---
2import { cn } from "@/lib/utils"
3import {
4  Accordion,
5  AccordionContent,
6  AccordionItem,
7  AccordionTrigger,
8} from "@/components/ui/accordion"
9import { Button } from "@/components/ui/button"
10import { Section, SectionContainer } from "@/components/ui/section"
11 
12type Props = {
13  class?: string
14  title: string
15  description: string
16  faqs: {
17    id: string
18    question: string
19    answer: string
20  }[]
21  buttons?: {
22    label: string
23    href: string
24    variant?: "default" | "outline" | "secondary" | "ghost"
25  }[]
26}
27 
28const { class: className, title, description, faqs, buttons } = Astro.props
29---
30 
31<Section class={cn("", className)}>
32  <SectionContainer class="items-center text-center">
33    <div class="flex max-w-2xl flex-col items-center gap-5">
34      <h2
35        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
36      >
37        {title}
38      </h2>
39      <p class="text-muted-foreground text-lg leading-relaxed text-balance">
40        {description}
41      </p>
42    </div>
43    {
44      buttons?.length && (
45        <div class="flex flex-wrap justify-center gap-3">
46          {buttons.map(({ href, label, ...button }, index) => (
47            <Button
48              as="a"
49              href={href}
50              size="lg"
51              variant={
52                button.variant ?? (index === 0 ? "default" : "secondary")
53              }
54              {...button}
55            >
56              {label}
57            </Button>
58          ))}
59        </div>
60      )
61    }
62  </SectionContainer>
63  <SectionContainer>
64    <div class="mx-auto w-full max-w-3xl">
65      <Accordion collapsible>
66        {
67          faqs.map((item) => (
68            <AccordionItem value={item.id}>
69              <AccordionTrigger>{item.question}</AccordionTrigger>
70              <AccordionContent>{item.answer}</AccordionContent>
71            </AccordionItem>
72          ))
73        }
74      </Accordion>
75    </div>
76  </SectionContainer>
77</Section>