{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonial-spotlight",
  "title": "Testimonial Spotlight",
  "author": "ncdai <dai@chanhdai.com>",
  "description": "Testimonial card with spotlight effect on hover.",
  "registryDependencies": [
    "https://chanhdai.com/r/testimonial.json"
  ],
  "files": [
    {
      "path": "src/registry/components/testimonial-spotlight/testimonial-spotlight.tsx",
      "content": "\"use client\"\n\nimport { useRef } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type TestimonialSpotlightProps = Omit<\n  React.ComponentPropsWithoutRef<\"div\">,\n  \"children\" | \"onMouseMove\"\n> & {\n  children: React.ReactNode\n}\n\nexport function TestimonialSpotlight({\n  children,\n  className,\n  ...props\n}: TestimonialSpotlightProps) {\n  const itemRef = useRef<HTMLDivElement>(null)\n\n  const handleMouseMove: React.MouseEventHandler<HTMLDivElement> = (e) => {\n    if (!itemRef.current) return\n\n    const rect = itemRef.current.getBoundingClientRect()\n\n    itemRef.current.style.setProperty(\n      \"--spotlight-x\",\n      `${e.clientX - rect.left}px`\n    )\n    itemRef.current.style.setProperty(\n      \"--spotlight-y\",\n      `${e.clientY - rect.top}px`\n    )\n  }\n\n  return (\n    <div\n      ref={itemRef}\n      data-slot=\"testimonial-spotlight\"\n      className={cn(\n        \"group/testimonial-spotlight relative overflow-hidden rounded-xl bg-card/50 inset-ring-1 inset-ring-foreground/10\",\n        className\n      )}\n      onMouseMove={handleMouseMove}\n      {...props}\n    >\n      <div\n        className=\"pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out group-hover/testimonial-spotlight:opacity-(--spotlight-opacity,0.5)\"\n        style={{\n          background: `radial-gradient(circle at var(--spotlight-x) var(--spotlight-y), var(--spotlight-color,rgba(255,255,255,0.2)), transparent var(--spotlight-size,60%))`,\n        }}\n      />\n      {children}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/testimonial-spotlight.tsx"
    }
  ],
  "docs": "https://chanhdai.com/components/testimonial-spotlight",
  "categories": [
    "marketing"
  ],
  "type": "registry:component"
}