{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel",
  "title": "Carousel",
  "description": "A smooth, auto-playing 3D carousel component with layout animations.",
  "dependencies": [
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/chamaac/carousel/carousel.tsx",
      "content": "\"use client\";\n\nimport Image from \"next/image\";\nimport { useEffect, useState } from \"react\";\nimport { LazyMotion, domMax, m } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface CourselProps {\n  images: string[];\n  className?: string;\n  cardWidth?: string | number;\n  cardHeight?: string | number;\n  duration?: number;\n  rotationAngle?: number;\n}\n\nconst Coursel = ({\n  images,\n  className,\n  cardWidth = \"250px\",\n  cardHeight = \"284px\",\n  duration = 0.5,\n  rotationAngle = 45,\n}: CourselProps) => {\n  const [currentIndex, setCurrentIndex] = useState<number>(0);\n  const items = [];\n  const totalItems = images.length;\n\n  // handle next func\n  const handleNext = () => {\n    setCurrentIndex((prevIndex) => (prevIndex + 1) % totalItems);\n  };\n\n  // useeffect to clear the interval\n  useEffect(() => {\n    // set interval to auto change the images every 1 sec\n    const interval = setInterval(() => {\n      handleNext();\n    }, 3000);\n\n    return () => clearInterval(interval);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Get previous, current, and next items\n  for (let i = 0; i <= 2; i++) {\n    const index = (currentIndex + i + totalItems) % totalItems;\n    items.push({\n      item: images[index],\n      index: index,\n      position: i,\n      isCenter: i === 1,\n    });\n  }\n\n  return (\n    <LazyMotion features={domMax}>\n      <div\n        className={cn(\"flex \", className)}\n        style={{\n          perspective: \"1200px\",\n          transformStyle: \"preserve-3d\",\n        }}\n      >\n        {items.map((item) => (\n          <m.div\n            key={item.item}\n            layoutId={item.item}\n            initial={{\n              scale: 0.8,\n              rotateY:\n                item.position === 0\n                  ? rotationAngle\n                  : item.position === 2\n                    ? -rotationAngle\n                    : 0,\n            }}\n            animate={{\n              scale: item.isCenter ? 1 : 0.9,\n              opacity: 1,\n              rotateY:\n                item.position === 0\n                  ? rotationAngle\n                  : item.position === 2\n                    ? -rotationAngle\n                    : 0,\n            }}\n            exit={{\n              scale: 0.8,\n              opacity: 0,\n              rotateY:\n                item.position === 0\n                  ? rotationAngle\n                  : item.position === 2\n                    ? -rotationAngle\n                    : 0,\n            }}\n            transition={{\n              duration: duration,\n            }}\n            style={{\n              width: cardWidth,\n              height: cardHeight,\n            }}\n            className={cn(\n              item.isCenter ? \"z-10\" : \"\",\n              \"relative flex-shrink-0\"\n            )}\n          >\n            <Image\n              src={item.item}\n              alt={`image-${item.index}`}\n              fill\n              priority={true}\n              className=\"object-cover rounded-[16px]\"\n              sizes=\"(max-width: 768px) 100vw, 50vw\"\n            />\n          </m.div>\n        ))}\n      </div>\n    </LazyMotion>\n  );\n};\n\nexport default Coursel;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}