"use client" import React, { ReactNode, createContext, forwardRef, useContext, useState, } from "react" import { AnimatePresence, MotionConfig, motion } from "motion/react" import ReactPlayer from "react-player/lazy" import useMeasure from "react-use-measure" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { SidePanel } from "../ui/side-panel" // Theme Context for Styling type ThemeContextType = { panelClass?: string } // Create the context with the type const ThemeContext = createContext({}) // Custom Hook for Measuring and Animations const useCustomMeasure = () => { const [ref, bounds] = useMeasure() const animateProps = { animate: { height: bounds.height > 0 ? bounds.height : 0.1 }, transition: { type: "spring", bounce: 0.02, duration: 0.65 }, } return { ref, animateProps } } // ResizablePanel Component type ResizablePanelProps = { children: ReactNode className?: string } // ResizablePanel Component const ResizablePanel = forwardRef( ({ children, className, ...props }, ref) => { const transition = { type: "ease", ease: "easeInOut", duration: 0.4 } return (

{children}

) } ) ResizablePanel.displayName = "ResizablePanel" // VideoPowerButton Component type VideoPowerButtonProps = { handleVideoOpen: () => void } // VideoPowerButton Component const VideoPowerButton = forwardRef( ({ handleVideoOpen }, ref) => { return (

) } ) VideoPowerButton.displayName = "VideoPowerButton" type YoutubeVideoProps = { videoOpen: boolean url: string } const YoutubeVideo = forwardRef( ({ videoOpen, url }, ref) => { return ( {videoOpen && ( )} ) } ) YoutubeVideo.displayName = "YoutubeVideo" type VideoContentProps = { url: string videoOpen: boolean } // Define the VideoContent component const VideoContent: React.FC = ({ url, videoOpen }) => { // Define the animation variants const videoVariants = { hidden: { opacity: 0, scale: 0.9, y: 30 }, visible: { opacity: 1, scale: 1, y: 0 }, } // Define transition properties const transition = { duration: 0.2, ease: [0.04, 0.62, 0.23, 0.98], // Custom cubic-bezier easing delay: 0.3, } return ( {videoOpen && ( )} ) } // Define the main VideoSection component type VideoSectionProps = { videoOpen: boolean handleVideoOpen: () => void className?: string videoUrl: string children?: ReactNode // Add this line } const VideoSection: React.FC = ({ videoOpen, handleVideoOpen, className, videoUrl, children, }) => { const theme = useContext(ThemeContext) return ( {children ? ( children ) : ( <> )} ) } export { VideoContent, VideoSection, YoutubeVideo, VideoPowerButton, ResizablePanel, useCustomMeasure, } export function VideoSectionDemo() { const [videoOpen, setVideoOpen] = useState(false) const handleVideoOpen = () => { setVideoOpen(!videoOpen) } const renderVideoButton = (handleToggle: () => void) => (

video

) return (

) }