Testimonial Spotlight

1"use client"
2 
3import { useRef } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export type TestimonialSpotlightProps = Omit<
8  React.ComponentPropsWithoutRef<"div">,
9  "children" | "onMouseMove"
10> & {
11  children: React.ReactNode
12}
13 
14export function TestimonialSpotlight({
15  children,
16  className,
17  ...props
18}: TestimonialSpotlightProps) {
19  const itemRef = useRef<HTMLDivElement>(null)
20 
21  const handleMouseMove: React.MouseEventHandler<HTMLDivElement> = (e) => {
22    if (!itemRef.current) return
23 
24    const rect = itemRef.current.getBoundingClientRect()
25 
26    itemRef.current.style.setProperty(
27      "--spotlight-x",
28      `${e.clientX - rect.left}px`
29    )
30    itemRef.current.style.setProperty(
31      "--spotlight-y",
32      `${e.clientY - rect.top}px`
33    )
34  }
35 
36  return (
37    <div
38      ref={itemRef}
39      data-slot="testimonial-spotlight"
40      className={cn(
41        "group/testimonial-spotlight relative overflow-hidden rounded-xl bg-card/50 inset-ring-1 inset-ring-foreground/10",
42        className
43      )}
44      onMouseMove={handleMouseMove}
45      {...props}
46    >
47      <div
48        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)"
49        style={{
50          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%))`,
51        }}
52      />
53      {children}
54    </div>
55  )
56}