{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "side-panel-demo",
  "type": "registry:component",
  "registryDependencies": [
    "side-panel"
  ],
  "files": [
    {
      "path": "registry/default/example/side-panel-demo.tsx",
      "content": "\"use client\"\n\nimport React, {\n  createContext,\n  forwardRef,\n  ReactNode,\n  useContext,\n  useState,\n} from \"react\"\nimport { AnimatePresence, motion, MotionConfig } from \"motion/react\"\nimport ReactPlayer from \"react-player/lazy\"\nimport useMeasure from \"react-use-measure\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nimport { SidePanel } from \"../ui/side-panel\"\n\n// Theme Context for Styling\ntype ThemeContextType = {\n  panelClass?: string\n}\n\n// Create the context with the type\nconst ThemeContext = createContext<ThemeContextType>({})\n\n// Custom Hook for Measuring and Animations\nconst useCustomMeasure = () => {\n  const [ref, bounds] = useMeasure()\n  const animateProps = {\n    animate: { height: bounds.height > 0 ? bounds.height : 0.1 },\n    transition: { type: \"spring\", bounce: 0.02, duration: 0.65 },\n  }\n  return { ref, animateProps }\n}\n\n// ResizablePanel Component\ntype ResizablePanelProps = {\n  children: ReactNode\n  className?: string\n}\n\n// ResizablePanel Component\nconst ResizablePanel = forwardRef<HTMLDivElement, ResizablePanelProps>(\n  ({ children, className, ...props }, ref) => {\n    const transition = {\n      type: \"tween\" as const,\n      ease: [0.42, 0, 0.58, 1] as const,\n      duration: 0.4,\n    }\n\n    return (\n      <MotionConfig transition={transition}>\n        <div\n          ref={ref}\n          className={cn(\"flex w-full flex-col items-start\", className)}\n          {...props}\n        >\n          <div className=\"mx-auto w-full\">\n            <div\n              className={cn(\n                children ? \"rounded-r-none\" : \"rounded-sm\",\n                \"relative overflow-hidden\"\n              )}\n            >\n              {children}\n            </div>\n          </div>\n        </div>\n      </MotionConfig>\n    )\n  }\n)\n\nResizablePanel.displayName = \"ResizablePanel\"\n\n// VideoPowerButton Component\ntype VideoPowerButtonProps = {\n  handleVideoOpen: () => void\n}\n\n// VideoPowerButton Component\nconst VideoPowerButton = forwardRef<HTMLInputElement, VideoPowerButtonProps>(\n  ({ handleVideoOpen }, ref) => {\n    return (\n      <div className=\"mx-3 flex flex-col items-center py-2\">\n        <input\n          ref={ref}\n          className=\"pb-4\"\n          id=\"checkbox\"\n          type=\"checkbox\"\n          onChange={handleVideoOpen}\n        />\n        <label className=\"switch\" htmlFor=\"checkbox\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 512 512\"\n            className=\"slider\"\n          >\n            {/* SVG path here */}\n          </svg>\n        </label>\n      </div>\n    )\n  }\n)\n\nVideoPowerButton.displayName = \"VideoPowerButton\"\n\ntype YoutubeVideoProps = {\n  videoOpen: boolean\n  url: string\n}\n\nconst YoutubeVideo = forwardRef<HTMLDivElement, YoutubeVideoProps>(\n  ({ videoOpen, url }, ref) => {\n    return (\n      <AnimatePresence>\n        {videoOpen && (\n          <motion.div\n            ref={ref}\n            className=\"h-[300px] w-full rounded-2xl bg-black px-1 py-1 md:flex md:aspect-video md:h-[800px] md:justify-center md:px-8 md:py-8\"\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"hidden\"\n          >\n            <ReactPlayer\n              width=\"100%\"\n              height=\"100%\"\n              controls={false}\n              color=\"white\"\n              url={url}\n            />\n          </motion.div>\n        )}\n      </AnimatePresence>\n    )\n  }\n)\n\nYoutubeVideo.displayName = \"YoutubeVideo\"\n\ntype VideoContentProps = {\n  url: string\n  videoOpen: boolean\n}\n\n// Define the VideoContent component\nconst VideoContent: React.FC<VideoContentProps> = ({ url, videoOpen }) => {\n  // Define the animation variants\n  const videoVariants = {\n    hidden: { opacity: 0, scale: 0.9, y: 30 },\n    visible: { opacity: 1, scale: 1, y: 0 },\n  }\n\n  // Define transition properties\n  const transition = {\n    duration: 0.2,\n    ease: [0.04, 0.62, 0.23, 0.98] as const, // Custom cubic-bezier easing\n    delay: 0.3,\n  }\n\n  return (\n    <AnimatePresence>\n      {videoOpen && (\n        <motion.div\n          className=\"h-[300px] w-full rounded-2xl bg-black px-1 py-1 md:flex md:aspect-video md:h-[800px] md:justify-center md:px-8 md:py-8\"\n          initial=\"hidden\"\n          animate=\"visible\"\n          exit=\"hidden\"\n          variants={videoVariants}\n          transition={transition}\n        >\n          <ReactPlayer\n            width=\"100%\"\n            height=\"100%\"\n            controls={false}\n            color=\"white\"\n            url={url}\n          />\n        </motion.div>\n      )}\n    </AnimatePresence>\n  )\n}\n\n// Define the main VideoSection component\ntype VideoSectionProps = {\n  videoOpen: boolean\n  handleVideoOpen: () => void\n  className?: string\n  videoUrl: string\n  children?: ReactNode // Add this line\n}\n\nconst VideoSection: React.FC<VideoSectionProps> = ({\n  videoOpen,\n  handleVideoOpen,\n  className,\n  videoUrl,\n  children,\n}) => {\n  const theme = useContext(ThemeContext)\n\n  return (\n    <ResizablePanel className={cn(className, theme.panelClass)}>\n      {children ? (\n        children\n      ) : (\n        <>\n          <VideoPowerButton handleVideoOpen={handleVideoOpen} />\n          <VideoContent url={videoUrl} videoOpen={videoOpen} />\n        </>\n      )}\n    </ResizablePanel>\n  )\n}\n\nexport {\n  VideoContent,\n  VideoSection,\n  YoutubeVideo,\n  VideoPowerButton,\n  ResizablePanel,\n  useCustomMeasure,\n}\n\nexport default function VideoSectionDemo() {\n  const [videoOpen, setVideoOpen] = useState(false)\n\n  const handleVideoOpen = () => {\n    setVideoOpen(!videoOpen)\n  }\n\n  const renderVideoButton = (handleToggle: () => void) => (\n    <div\n      className={cn(\n        \"flex w-full items-center justify-start py-1 pr-4 md:py-1 md:pl-4\",\n        videoOpen ? \"pr-3\" : \"\"\n      )}\n    >\n      <p className=\"text-xl font-black tracking-tight text-gray-900 sm:text-3xl\">\n        <span className=\"font-brand bg-gradient-to-t from-neutral-200 to-stone-300 bg-clip-text text-xl font-bold text-transparent sm:text-6xl\">\n          video\n        </span>\n      </p>\n      <Button\n        className=\"ml-2 rounded-r-[33px] py-8\"\n        onClick={handleVideoOpen}\n        variant=\"secondary\"\n      >\n        {videoOpen ? \"close\" : \"open\"}\n      </Button>\n    </div>\n  )\n\n  return (\n    <div className=\"w-full max-w-4xl\">\n      <div className=\"flex min-h-[500px] flex-col justify-center space-y-4 rounded-lg border border-dashed\">\n        <SidePanel\n          panelOpen={videoOpen}\n          handlePanelOpen={handleVideoOpen}\n          renderButton={renderVideoButton}\n        >\n          <YoutubeVideo\n            videoOpen={videoOpen}\n            url={\"https://youtu.be/ta6m_l3lZvQ?si=1CPubGeqxLVG0i2L\"}\n          />\n        </SidePanel>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}