accordion

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