A basic single-expand accordion

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/components/ui/accordion"
7 
8const items = [
9  {
10    value: "item-1",
11    trigger: "Is it accessible ?",
12    content: "Yes. It adheres to the WAI-ARIA design pattern.",
13  },
14  {
15    value: "item-2",
16    trigger: "Is it styled?",
17    content:
18      "Yes. It comes with default styles that matches the other components' aesthetic.",
19  },
20  {
21    value: "item-3",
22    trigger: "Is it animated?",
23    content:
24      "Yes. It's animated by default, but you can disable it if you prefer.",
25  },
26]
27 
28export function Pattern() {
29  return (
30    <div className="mx-auto mb-auto w-full max-w-lg">
31      <Accordion multiple={false} defaultValue={["item-1"]}>
32        {items.map((item) => (
33          <AccordionItem key={item.value} value={item.value}>
34            <AccordionTrigger>{item.trigger}</AccordionTrigger>
35            <AccordionContent>{item.content}</AccordionContent>
36          </AccordionItem>
37        ))}
38      </Accordion>
39    </div>
40  )
41}