Glass Spotlight

1"use client"
2 
3import * as React from "react"
4import { X, ChevronLeft, ChevronRight } from "lucide-react"
5import { cn } from "@/lib/utils"
6 
7interface SpotlightStep {
8  target: string // CSS selector
9  title: string
10  description: string
11  placement?: "top" | "bottom" | "left" | "right"
12}
13 
14interface GlassSpotlightProps {
15  steps: SpotlightStep[]
16  open?: boolean
17  onOpenChange?: (open: boolean) => void
18  onComplete?: () => void
19}
20 
21function GlassSpotlight({ steps, open = false, onOpenChange, onComplete }: GlassSpotlightProps) {
22  const [currentStep, setCurrentStep] = React.useState(0)
23  const [targetRect, setTargetRect] = React.useState<DOMRect | null>(null)
24 
25  const step = steps[currentStep]
26 
27  React.useLayoutEffect(() => {
28    if (!open || !step) return
29 
30    const target = document.querySelector(step.target)
31    if (target) {
32      const rect = target.getBoundingClientRect()
33      // eslint-disable-next-line react-hooks/set-state-in-effect
34      setTargetRect(rect)
35      target.scrollIntoView({ behavior: "smooth", block: "center" })
36    }
37  }, [open, step, currentStep])
38 
39  React.useEffect(() => {
40    const handleResize = () => {
41      if (!step) return
42      const target = document.querySelector(step.target)
43      if (target) {
44        setTargetRect(target.getBoundingClientRect())
45      }
46    }
47 
48    window.addEventListener("resize", handleResize)
49    return () => window.removeEventListener("resize", handleResize)
50  }, [step])
51 
52  const handleNext = () => {
53    if (currentStep < steps.length - 1) {
54      setCurrentStep((prev) => prev + 1)
55    } else {
56      onComplete?.()
57      onOpenChange?.(false)
58      setCurrentStep(0)
59    }
60  }
61 
62  const handlePrev = () => {
63    if (currentStep > 0) {
64      setCurrentStep((prev) => prev - 1)
65    }
66  }
67 
68  const handleClose = () => {
69    onOpenChange?.(false)
70    setCurrentStep(0)
71  }
72 
73  if (!open || !targetRect) return null
74 
75  const padding = 8
76  const tooltipWidth = 320
77 
78  // Calculate tooltip position
79  let tooltipStyle: React.CSSProperties = {}
80  const placement = step.placement || "bottom"
81 
82  switch (placement) {
83    case "top":
84      tooltipStyle = {
85        left: targetRect.left + targetRect.width / 2 - tooltipWidth / 2,
86        bottom: window.innerHeight - targetRect.top + padding + 12,
87      }
88      break
89    case "bottom":
90      tooltipStyle = {
91        left: targetRect.left + targetRect.width / 2 - tooltipWidth / 2,
92        top: targetRect.bottom + padding + 12,
93      }
94      break
95    case "left":
96// … truncated