"use client" import React, { forwardRef, ReactNode } from "react" import { AnimatePresence, motion, MotionConfig } from "motion/react" import useMeasure from "react-use-measure" import { cn } from "@/lib/utils" type PanelContainerProps = { panelOpen: boolean handlePanelOpen: () => void className?: string videoUrl?: string renderButton?: (handleToggle: () => void) => ReactNode children: ReactNode } const sectionVariants = { open: { width: "97%", transition: { duration: 0.3, ease: [0.42, 0, 0.58, 1] as const, delayChildren: 0.3, staggerChildren: 0.2, }, }, closed: { transition: { duration: 0.2, ease: [0.42, 0, 0.58, 1] as const }, }, } const sharedTransition = { duration: 0.6, ease: [0.42, 0, 0.58, 1] as const } export const SidePanel = forwardRef( ({ panelOpen, handlePanelOpen, className, renderButton, children }, ref) => { const [measureRef, bounds] = useMeasure() return ( 0 ? bounds.height : 0.1 }} className="h-auto" transition={{ type: "spring", bounce: 0.02, duration: 0.65 }} >

{renderButton && renderButton(handlePanelOpen)}

{panelOpen && ( {children} )}

) } ) SidePanel.displayName = "SidePanel" export default SidePanel type ResizablePanelProps = { children: React.ReactNode } const ResizablePanel = React.forwardRef( ({ children }, ref) => { const transition = { type: "tween" as const, ease: [0.42, 0, 0.58, 1] as const, duration: 0.4, } return (

{children}

) } ) ResizablePanel.displayName = "ResizablePanel"

Side Panel

Instalação