23 行
694 B
TypeScript
23 行
694 B
TypeScript
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
|