63:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 64:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 65:T1a36,"use client" import React, { createContext, forwardRef, ReactNode, useContext, useState, } from "react" import { AnimatePresence, motion, MotionConfig } 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: "tween" as const, ease: [0.42, 0, 0.58, 1] as const, 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] as const, // 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 default function VideoSectionDemo() { const [videoOpen, setVideoOpen] = useState(false) const handleVideoOpen = () => { setVideoOpen(!videoOpen) } const renderVideoButton = (handleToggle: () => void) => (

video

) return (

) } 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":["side-panel"]}]]}],null]}],["$","$L64",null,{"files":[{"path":"registry/default/example/side-panel-demo.tsx","content":"$65","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]