Accordion2

1import {
2  Accordion,
3  AccordionContent,
4  AccordionItem,
5  AccordionTrigger,
6} from "@/ui/accordion";
7 
8export default function Accordion2() {
9  return (
10    <Accordion
11      type="single"
12      collapsible
13      className="w-full rounded border text-sm"
14    >
15      <AccordionItem className="px-4" value="item-1">
16        <AccordionTrigger>What is a micro-interaction?</AccordionTrigger>
17        <AccordionContent className="text-muted-foreground">
18          Micro-interactions are events which have one main task — a single
19          purpose — and they are found all over your device and within apps.
20        </AccordionContent>
21      </AccordionItem>
22      <AccordionItem className="px-4" value="item-2">
23        <AccordionTrigger>
24          Why should I use a micro-interaction?
25        </AccordionTrigger>
26        <AccordionContent className="text-muted-foreground">
27          You should use micro-interactions to enhance a simple task and to make
28          the experience more enjoyable.
29        </AccordionContent>
30      </AccordionItem>
31      <AccordionItem className="border-b-0 px-4" value="item-3">
32        <AccordionTrigger>How do I use a micro-interaction?</AccordionTrigger>
33        <AccordionContent className="text-muted-foreground">
34          Start by thinking about the task you want the user to perform.
35        </AccordionContent>
36      </AccordionItem>
37    </Accordion>
38  );
39}