{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "custom-cursor-2-demo",
  "title": "Custom Cursor 2 Demo",
  "description": "Demo showing another usecase of Custom Cursor component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/custom-cursor"
  ],
  "files": [
    {
      "path": "registry/demo/components/custom-cursor-2/index.tsx",
      "content": "'use client';\n\nimport {\n  CustomCursor,\n  CustomCursorProvider,\n  useCustomCursor,\n} from '@/components/systaliko-ui/components/custom-cursor';\n\nfunction CustomCursor2Content() {\n  const { setCursorStyle, setCursorChildren, containerRef } = useCustomCursor();\n  const defaultCursorStyle =\n    'border border-foreground min-w-5 min-h-5 rounded-full bg-none';\n  const handleMouseLeave = () => {\n    setCursorChildren(<div className={defaultCursorStyle} />);\n    setCursorStyle({ border: 'none', borderRadius: 0 });\n  };\n  const handleProjectCursor = () => {\n    setCursorChildren(\n      <div className=\"bg-foreground/80 text-center border-none text-white aspect-square rounded-full p-4\">\n        View <br /> Project\n      </div>,\n    );\n  };\n\n  const handleVideoCursor = () => {\n    setCursorChildren(\n      <div className=\"shadow overflow-hidden rounded-sm aspect-video w-64\">\n        <video\n          className=\"relative z-10  max-h-full max-w-full \"\n          src=\"https://videos.pexels.com/video-files/8086711/8086711-uhd_2560_1440_25fps.mp4\"\n          autoPlay\n          muted\n          loop\n          playsInline\n        />\n      </div>,\n    );\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"container relative flex justify-center gap-12 flex-wrap items-center py-12 px-6 min-h-svh\"\n    >\n      <CustomCursor className={defaultCursorStyle} />\n\n      <div className=\"flex flex-wrap justify-evenly items-center gap-8\">\n        <div\n          className=\"h-[450px] rounded overflow-hidden shadow\"\n          onMouseEnter={handleProjectCursor}\n          onMouseLeave={handleMouseLeave}\n        >\n          <img\n            width={401}\n            height={602}\n            alt=\"project\"\n            src=\"https://images.unsplash.com/photo-1688733720228-4f7a18681c4f?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n            className=\"max-h-full h-auto w-full\"\n          />\n        </div>\n        <div\n          className=\"h-[450px] rounded overflow-hidden shadow\"\n          onMouseEnter={handleVideoCursor}\n          onMouseLeave={handleMouseLeave}\n        >\n          <img\n            width={430}\n            height={602}\n            alt=\"asimo robot\"\n            src=\"https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?q=80&w=715&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n            className=\"max-h-full h-auto w-full\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\nexport function CustomCursor2Demo() {\n  return (\n    <CustomCursorProvider>\n      <CustomCursor2Content />\n    </CustomCursorProvider>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/systaliko-ui/demo/custom-cursor.tsx"
    }
  ],
  "type": "registry:ui"
}