Collapsible

1import * as React from 'react'
2import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
3import { cn } from '@/lib/utils'
4 
5const Collapsible = CollapsiblePrimitive.Root
6 
7const CollapsibleTrigger = React.forwardRef<
8  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleTrigger>,
9  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleTrigger>
10>(({ className, ...props }, ref) => (
11  <CollapsiblePrimitive.CollapsibleTrigger
12    ref={ref}
13    className={cn(
14      'transition duration-150 [&[data-state=open]>svg]:rotate-180',
15      className
16    )}
17    {...props}
18  />
19))
20CollapsibleTrigger.displayName = CollapsiblePrimitive.CollapsibleTrigger.displayName
21 
22const CollapsibleContent = React.forwardRef<
23  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
24  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
25>(({ className, ...props }, ref) => (
26  <CollapsiblePrimitive.CollapsibleContent
27    ref={ref}
28    className={cn(
29      'overflow-hidden transition data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down',
30      className
31    )}
32    {...props}
33  />
34))
35CollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.displayName
36 
37export { Collapsible, CollapsibleTrigger, CollapsibleContent }