Accordion

1"use client"
2 
3import * as React from "react"
4import * as AccordionPrimitive from "@radix-ui/react-accordion"
5import { ChevronDown } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9const Accordion = AccordionPrimitive.Root
10 
11const AccordionItem = React.forwardRef<
12  React.ElementRef<typeof AccordionPrimitive.Item>,
13  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14>(({ className, ...props }, ref) => (
15  <AccordionPrimitive.Item
16    ref={ref}
17    className={cn("border-b", className)}
18    {...props}
19  />
20))
21AccordionItem.displayName = "AccordionItem"
22 
23const AccordionTrigger = React.forwardRef<
24  React.ElementRef<typeof AccordionPrimitive.Trigger>,
25  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26>(({ className, children, ...props }, ref) => (
27  <AccordionPrimitive.Header className="flex">
28    <AccordionPrimitive.Trigger
29      ref={ref}
30      className={cn(
31        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
32        className
33      )}
34      {...props}
35    >
36      {children}
37      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
38    </AccordionPrimitive.Trigger>
39  </AccordionPrimitive.Header>
40))
41AccordionTrigger.displayName = "AccordionTrigger"
42 
43const AccordionContent = React.forwardRef<
44  React.ElementRef<typeof AccordionPrimitive.Content>,
45  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46>(({ className, children, ...props }, ref) => (
47  <AccordionPrimitive.Content
48    ref={ref}
49    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
50    {...props}
51  >
52    <div className={cn("pb-4 pt-0", className)}>{children}</div>
53  </AccordionPrimitive.Content>
54))
55AccordionContent.displayName = "AccordionContent"
56 
57export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }