|
1 | | -import { cn } from '@/lib/utils'; |
| 1 | +import { cn } from '@/lib/utils'; |
2 | 2 | import * as AccordionPrimitive from '@radix-ui/react-accordion'; |
3 | | -import { ChevronDownIcon } from 'lucide-react'; |
| 3 | +import { ChevronDownIcon } from 'lucide-react'; |
4 | 4 | import type { ComponentProps } from 'react'; |
5 | 5 |
|
6 | | -function Accordion({ |
7 | | - ...props |
8 | | -}: ComponentProps<typeof AccordionPrimitive.Root>) { |
9 | | - return <AccordionPrimitive.Root data-slot="accordion" {...props} /> |
| 6 | +function Accordion({ ...props }: ComponentProps<typeof AccordionPrimitive.Root>) { |
| 7 | + return <AccordionPrimitive.Root data-slot="accordion" {...props} />; |
10 | 8 | } |
11 | 9 |
|
12 | | -function AccordionItem({ |
13 | | - className, |
14 | | - ...props |
15 | | -}: ComponentProps<typeof AccordionPrimitive.Item>) { |
16 | | - return ( |
17 | | - <AccordionPrimitive.Item |
18 | | - data-slot="accordion-item" |
19 | | - className={cn("border-b last:border-b-0", className)} |
20 | | - {...props} |
21 | | - /> |
22 | | - ) |
| 10 | +function AccordionItem({ className, ...props }: ComponentProps<typeof AccordionPrimitive.Item>) { |
| 11 | + return ( |
| 12 | + <AccordionPrimitive.Item |
| 13 | + data-slot="accordion-item" |
| 14 | + className={cn('border-b last:border-b-0', className)} |
| 15 | + {...props} |
| 16 | + /> |
| 17 | + ); |
23 | 18 | } |
24 | 19 |
|
25 | | -function AccordionTrigger({ |
26 | | - className, |
27 | | - children, |
28 | | - ...props |
29 | | -}: ComponentProps<typeof AccordionPrimitive.Trigger>) { |
30 | | - return ( |
31 | | - <AccordionPrimitive.Header className="flex"> |
32 | | - <AccordionPrimitive.Trigger |
33 | | - data-slot="accordion-trigger" |
34 | | - className={cn( |
35 | | - "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", |
36 | | - className |
37 | | - )} |
38 | | - {...props} |
39 | | - > |
40 | | - {children} |
41 | | - <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" /> |
42 | | - </AccordionPrimitive.Trigger> |
43 | | - </AccordionPrimitive.Header> |
44 | | - ) |
| 20 | +function AccordionTrigger({ className, children, ...props }: ComponentProps<typeof AccordionPrimitive.Trigger>) { |
| 21 | + return ( |
| 22 | + <AccordionPrimitive.Header className="flex"> |
| 23 | + <AccordionPrimitive.Trigger |
| 24 | + data-slot="accordion-trigger" |
| 25 | + className={cn( |
| 26 | + 'flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180', |
| 27 | + className, |
| 28 | + )} |
| 29 | + {...props} |
| 30 | + > |
| 31 | + {children} |
| 32 | + <ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" /> |
| 33 | + </AccordionPrimitive.Trigger> |
| 34 | + </AccordionPrimitive.Header> |
| 35 | + ); |
45 | 36 | } |
46 | 37 |
|
47 | | -function AccordionContent({ |
48 | | - className, |
49 | | - children, |
50 | | - ...props |
51 | | -}: ComponentProps<typeof AccordionPrimitive.Content>) { |
52 | | - return ( |
53 | | - <AccordionPrimitive.Content |
54 | | - data-slot="accordion-content" |
55 | | - className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm" |
56 | | - {...props} |
57 | | - > |
58 | | - <div className={cn("pt-0 pb-4", className)}>{children}</div> |
59 | | - </AccordionPrimitive.Content> |
60 | | - ) |
| 38 | +function AccordionContent({ className, children, ...props }: ComponentProps<typeof AccordionPrimitive.Content>) { |
| 39 | + return ( |
| 40 | + <AccordionPrimitive.Content |
| 41 | + data-slot="accordion-content" |
| 42 | + className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm" |
| 43 | + {...props} |
| 44 | + > |
| 45 | + <div className={cn('pt-0 pb-4', className)}>{children}</div> |
| 46 | + </AccordionPrimitive.Content> |
| 47 | + ); |
61 | 48 | } |
62 | 49 |
|
63 | | -export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } |
| 50 | +export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }; |
0 commit comments