{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonial-spotlight",
  "title": "Testimonial Spotlight",
  "author": "nghia.ly <physicalmeans@gmail.com>",
  "description": "Testimonial card with spotlight effect on hover.",
  "registryDependencies": [
    "https://lyminhnghia.github.io/r/testimonial.json"
  ],
  "files": [
    {
      "path": "src/registry/components/testimonial-spotlight/testimonial-spotlight.tsx",
      "content": "\"use client\"\n\nimport { useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Position = {\n  x: number\n  y: number\n}\n\nconst SPOTLIGHT_OPACITY = 0.5\n\nexport function TestimonialSpotlight({\n  children,\n  className,\n  spotlightColor = \"rgba(255,255,255,0.2)\",\n}: {\n  children: React.ReactNode\n  className?: string\n  spotlightColor?: `rgba(${number},${number},${number},${number})`\n}) {\n  const itemRef = useRef<HTMLDivElement>(null)\n\n  const [isFocused, setIsFocused] = useState<boolean>(false)\n  const [opacity, setOpacity] = useState<number>(0)\n  const [position, setPosition] = useState<Position>({ x: 0, y: 0 })\n\n  const handleFocus = () => {\n    setIsFocused(true)\n    setOpacity(SPOTLIGHT_OPACITY)\n  }\n\n  const handleBlur = () => {\n    setIsFocused(false)\n    setOpacity(0)\n  }\n\n  const handleMouseEnter = () => {\n    setOpacity(SPOTLIGHT_OPACITY)\n  }\n\n  const handleMouseLeave = () => {\n    setOpacity(0)\n  }\n\n  const handleMouseMove: React.MouseEventHandler<HTMLDivElement> = (e) => {\n    if (!itemRef.current || isFocused) return\n\n    const rect = itemRef.current.getBoundingClientRect()\n    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top })\n  }\n\n  return (\n    <div\n      ref={itemRef}\n      className={cn(\n        \"relative overflow-hidden rounded-xl bg-card/50 ring-1 ring-foreground/10 ring-inset\",\n        className\n      )}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onMouseMove={handleMouseMove}\n    >\n      <div\n        className=\"pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out\"\n        style={{\n          opacity,\n          background: `radial-gradient(circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 60%)`,\n        }}\n      />\n      {children}\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}