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