Accordion1

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