Collapsible

1'use client';
2import * as React from 'react';
3import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
4import { motion } from 'motion/react';
5 
6function Collapsible({
7  ...props
8}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
9  return <CollapsiblePrimitive.Root data-slot='collapsible' {...props} />;
10}
11 
12function CollapsibleTrigger({
13  ...props
14}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
15  return (
16    <CollapsiblePrimitive.CollapsibleTrigger
17      data-slot='collapsible-trigger'
18      asChild
19      {...props}
20    >
21      <motion.div
22        whileHover={{ scale: 1.01 }}
23        whileTap={{ scale: 0.99 }}
24        transition={{ duration: 0.2 }}
25      >
26        {props.children}
27      </motion.div>
28    </CollapsiblePrimitive.CollapsibleTrigger>
29  );
30}
31 
32function CollapsibleContent({
33  ...props
34}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
35  return (
36    <CollapsiblePrimitive.CollapsibleContent
37      data-slot='collapsible-content'
38      asChild
39      {...props}
40    >
41      <motion.div
42        initial={{ height: 0, opacity: 0 }}
43        animate={{ height: 'auto', opacity: 1 }}
44        exit={{ height: 0, opacity: 0 }}
45        transition={{
46          duration: 0.3,
47          ease: 'easeInOut',
48        }}
49        style={{ overflow: 'hidden' }}
50      >
51        {props.children}
52      </motion.div>
53    </CollapsiblePrimitive.CollapsibleContent>
54  );
55}
56 
57export { Collapsible, CollapsibleTrigger, CollapsibleContent };