Testimonial Spotlight

1"use client"
2 
3import { useRef, useState } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7type Position = {
8  x: number
9  y: number
10}
11 
12const SPOTLIGHT_OPACITY = 0.5
13 
14export function TestimonialSpotlight({
15  children,
16  className,
17  spotlightColor = "rgba(255,255,255,0.2)",
18}: {
19  children: React.ReactNode
20  className?: string
21  spotlightColor?: `rgba(${number},${number},${number},${number})`
22}) {
23  const itemRef = useRef<HTMLDivElement>(null)
24 
25  const [isFocused, setIsFocused] = useState<boolean>(false)
26  const [opacity, setOpacity] = useState<number>(0)
27  const [position, setPosition] = useState<Position>({ x: 0, y: 0 })
28 
29  const handleFocus = () => {
30    setIsFocused(true)
31    setOpacity(SPOTLIGHT_OPACITY)
32  }
33 
34  const handleBlur = () => {
35    setIsFocused(false)
36    setOpacity(0)
37  }
38 
39  const handleMouseEnter = () => {
40    setOpacity(SPOTLIGHT_OPACITY)
41  }
42 
43  const handleMouseLeave = () => {
44    setOpacity(0)
45  }
46 
47  const handleMouseMove: React.MouseEventHandler<HTMLDivElement> = (e) => {
48    if (!itemRef.current || isFocused) return
49 
50    const rect = itemRef.current.getBoundingClientRect()
51    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top })
52  }
53 
54  return (
55    <div
56      ref={itemRef}
57      className={cn(
58        "relative overflow-hidden rounded-xl bg-card/50 ring-1 ring-foreground/10 ring-inset",
59        className
60      )}
61      onFocus={handleFocus}
62      onBlur={handleBlur}
63      onMouseEnter={handleMouseEnter}
64      onMouseLeave={handleMouseLeave}
65      onMouseMove={handleMouseMove}
66    >
67      <div
68        className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out"
69        style={{
70          opacity,
71          background: `radial-gradient(circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 60%)`,
72        }}
73      />
74      {children}
75    </div>
76  )
77}