#434

frontend/src/components/common/AnimatedCollapse.tsx

@@ -0,0 +1,22 @@
+import { motion } from 'framer-motion'
+
+import { useClientMotion } from '@/lib/useClientMotion'
+import { cn } from '@/lib/utils'
+
+import type { ReactNode } from 'react'
+
+
+const AnimatedCollapse = ({ open, children, id, className }: {
+    open: boolean; children: ReactNode; id?: string; className?: string },
+) => {
+  const motionSettings = useClientMotion ()
+  return <motion.div id={id} initial={false} aria-hidden={!open} inert={!open}
+      animate={{ height: open ? 'auto' : 0, opacity: open ? 1 : 0 }}
+      transition={motionSettings.transition ('collapse')}
+      className={cn ('min-h-0 overflow-hidden', className)}>
+    {children}
+  </motion.div>
+}
+
+
+export default AnimatedCollapse