faqs-2

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>
33    <div
34      class="grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16"
35    >
36      <div class="lg:sticky lg:top-24 lg:self-start">
37        <h2
38          class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
39        >
40          {title}
41        </h2>
42        <p
43          class="text-muted-foreground mt-4 text-base leading-relaxed text-balance"
44        >
45          {description}
46        </p>
47        {
48          buttons?.length && (
49            <div class="mt-8 flex flex-wrap gap-3">
50              {buttons.map(({ href, label, ...button }, index) => (
51                <Button
52                  as="a"
53                  href={href}
54                  size="lg"
55                  variant={
56                    button.variant ?? (index === 0 ? "default" : "secondary")
57                  }
58                  {...button}
59                >
60                  {label}
61                </Button>
62              ))}
63            </div>
64          )
65        }
66      </div>
67 
68      <div>
69        <Accordion collapsible>
70          {
71            faqs.map((item) => (
72              <AccordionItem value={item.id}>
73                <AccordionTrigger>{item.question}</AccordionTrigger>
74                <AccordionContent>{item.answer}</AccordionContent>
75              </AccordionItem>
76            ))
77          }
78        </Accordion>
79      </div>
80    </div>
81  </SectionContainer>
82</Section>