{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cursor-carousel",
  "type": "registry:block",
  "title": "Cursor carousel",
  "description": "Cursor carousel",
  "files": [
    {
      "path": "components/usages/cursorcarouselusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport One from \"@/registry/open-source/cursor-carousel\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<One />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/cursorcarouselusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport One from \"@/registry/open-source/cursor-carousel\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<One />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/cursor-carousel.tsx",
      "content": "\"use client\";\n\nimport React, { RefObject, useEffect, useRef, useState } from \"react\";\n\nimport Image from \"next/image\";\n\nimport image4 from \"@/public/itjustworks.jpg\";\nimport image5 from \"@/public/itjustworks.jpg\";\nimport image6 from \"@/public/itjustworks.jpg\";\nimport image7 from \"@/public/itjustworks.jpg\";\nimport image8 from \"@/public/itjustworks.jpg\";\nimport { ArrowRight } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\nconst One = () => {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst [currentIndex, setCurrentIndex] = useState(0);\n\tconst [direction, setDirection] = useState(0);\n\n\tconst images = [\n\t\t{\n\t\t\tsrc: image4,\n\t\t\talt: \"Nothing really herr\",\n\t\t},\n\t\t{\n\t\t\tsrc: image5,\n\t\t\talt: \"Nothing really herr\",\n\t\t},\n\t\t{\n\t\t\tsrc: image6,\n\t\t\talt: \"Nothing really herr\",\n\t\t},\n\t\t{\n\t\t\tsrc: image7,\n\t\t\talt: \"Nothing really herr\",\n\t\t},\n\t\t{\n\t\t\tsrc: image8,\n\t\t\talt: \"Nothing really herr\",\n\t\t},\n\t];\n\n\tconst variants = {\n\t\tenter: (direction: number) => ({\n\t\t\tx: direction > 0 ? 600 : -600,\n\t\t\topacity: 0,\n\t\t}),\n\t\tcenter: {\n\t\t\tx: 0,\n\t\t\topacity: 1,\n\t\t},\n\t\texit: (direction: number) => ({\n\t\t\tx: direction < 0 ? 600 : -600,\n\t\t\topacity: 0,\n\t\t}),\n\t};\n\n\tconst handlePrev = () => {\n\t\tsetDirection(-1);\n\t\tsetCurrentIndex(\n\t\t\t(prevIndex) => (prevIndex - 1 + images?.length) % images?.length\n\t\t);\n\t};\n\n\tconst handleNext = () => {\n\t\tsetDirection(1);\n\t\tsetCurrentIndex((prevIndex) => (prevIndex + 1) % images?.length);\n\t};\n\n\treturn (\n\t\t<div className=\"relative h-full w-full center\">\n\t\t\t<CustomCursor\n\t\t\t\tcontainerRef={containerRef}\n\t\t\t\tonClickLeft={handlePrev}\n\t\t\t\tonClickRight={handleNext}\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={containerRef}\n\t\t\t\tclassName=\"w-[90%] h-[600px] border-4 rounded-3xl flex items-center text-foreground/90 justify-center borderwhie mx-auto mt-10 overflow-hidden relative\"\n\t\t\t>\n\t\t\t\t<AnimatePresence initial={false} custom={direction}>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tkey={currentIndex}\n\t\t\t\t\t\tcustom={direction}\n\t\t\t\t\t\tvariants={variants}\n\t\t\t\t\t\tinitial=\"enter\"\n\t\t\t\t\t\tanimate=\"center\"\n\t\t\t\t\t\texit=\"exit\"\n\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\topacity: { duration: 0.2 },\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tclassName={`w-full h-full flex items-center justify-center text-foreground text-4xl absolute`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tfill\n\t\t\t\t\t\t\tsrc={images[currentIndex].src}\n\t\t\t\t\t\t\talt={images[currentIndex].alt}\n\t\t\t\t\t\t\tplaceholder=\"blur\"\n\t\t\t\t\t\t\tclassName=\"object-cover object-top\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</motion.div>\n\t\t\t\t\t<div className=\"absolute h-10 w-fit flex items-center gap-1 left-0 right-0 mx-auto bottom-0\">\n\t\t\t\t\t\t{Array.from({ length: images?.length }).map((_, index) => (\n\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\tkey={index + \"cursor-carousel\"}\n\t\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\t\twidth: index === currentIndex ? 40 : 2,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tclassName=\"w-2 h-2 min-w-2 bg-background rounded-full\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</AnimatePresence>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\ninterface CustomCursorProps {\n\tcontainerRef: RefObject<HTMLDivElement>;\n\tonClickLeft: () => void;\n\tonClickRight: () => void;\n}\n\ninterface MousePosition {\n\tx: number;\n\ty: number;\n}\n\nconst CustomCursor: React.FC<CustomCursorProps> = ({\n\tcontainerRef,\n\tonClickLeft,\n\tonClickRight,\n}) => {\n\tconst [mousePosition, setMousePosition] = useState<MousePosition>({\n\t\tx: 0,\n\t\ty: 0,\n\t});\n\tconst [isInside, setIsInside] = useState<boolean>(false);\n\tconst [rotation, setRotation] = useState<boolean>(false);\n\n\tuseEffect(() => {\n\t\tconst handleMouseMove = (e: MouseEvent) => {\n\t\t\tsetMousePosition({ x: e.clientX, y: e.clientY });\n\n\t\t\tif (containerRef.current) {\n\t\t\t\tconst rect = containerRef.current.getBoundingClientRect();\n\t\t\t\tconst isInside =\n\t\t\t\t\te.clientX >= rect.left &&\n\t\t\t\t\te.clientX <= rect.right &&\n\t\t\t\t\te.clientY >= rect.top &&\n\t\t\t\t\te.clientY <= rect.bottom;\n\t\t\t\tsetIsInside(isInside);\n\n\t\t\t\tif (isInside) {\n\t\t\t\t\tconst centerX = rect.left + rect.width / 2;\n\t\t\t\t\tconst isLeftHalf = e.clientX < centerX;\n\t\t\t\t\tsetRotation(isLeftHalf);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tconst handleClick = (e: MouseEvent) => {\n\t\t\tif (isInside && containerRef.current) {\n\t\t\t\tconst rect = containerRef.current.getBoundingClientRect();\n\t\t\t\tconst centerX = rect.left + rect.width / 2;\n\t\t\t\tif (e.clientX < centerX) {\n\t\t\t\t\tonClickLeft();\n\t\t\t\t} else {\n\t\t\t\t\tonClickRight();\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\twindow.addEventListener(\"mousemove\", handleMouseMove);\n\t\twindow.addEventListener(\"click\", handleClick);\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"mousemove\", handleMouseMove);\n\t\t\twindow.removeEventListener(\"click\", handleClick);\n\t\t};\n\t}, [containerRef, isInside, onClickLeft, onClickRight]);\n\n\treturn (\n\t\t<div>\n\t\t\t<AnimatePresence>\n\t\t\t\t{isInside && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tinitial={{\n\t\t\t\t\t\t\tscale: 0,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\texit={{\n\t\t\t\t\t\t\tscale: 0,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tclassName=\"fixed z-50\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tleft: mousePosition.x - 25,\n\t\t\t\t\t\t\ttop: mousePosition.y - 25,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\twhileTap={{ scale: 0.8 }}\n\t\t\t\t\t\t\tclassName=\"flex items-center justify-center w-[50px] h-[50px] bg-primary text-primary-foreground rounded-full\"\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\trotate: rotation ? 180 : 0,\n\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\tduration: 0.5,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\ttype: \"spring\",\n\t\t\t\t\t\t\t\tstiffness: 300,\n\t\t\t\t\t\t\t\tdamping: 30,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ArrowRight size={24} />\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t</motion.div>\n\t\t\t\t)}\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n};\n\nexport default One;\n",
      "type": "registry:ui"
    }
  ]
}