useMousePosition

"use client"import * as React from "react"import { cn } from "@/lib/utils"import { useMousePosition } from "@/components/ui/shadcn-io/use-mouse-position"export function UseMousePositionDemo() {  const containerRef = React.useRef<HTMLDivElement>(null)  const [mouse, trackingRef] = useMousePosition<HTMLDivElement>()    // Only show tracking when mouse is within the container  const xIntersecting =     mouse.elementX !== undefined && mouse.elementX >= 0 && mouse.elementX <= 320  const yIntersecting =    mouse.elementY !== undefined && mouse.elementY >= 0 && mouse.elementY <= 200  const isIntersecting = xIntersecting && yIntersecting  return (    <div className="space-y-3 p-4 max-w-sm mx-auto">      <div className="space-y-1">        <h3 className="font-semibold">Mouse Position Tracker</h3>        <p className="text-xs text-muted-foreground">          Hover over the area below to see coordinates        </p>      </div>            <div        ref={containerRef}        className="relative w-full h-48 overflow-hidden rounded-lg border-2 border-dashed border-primary/30 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950 dark:to-purple-950"      >        <div          ref={trackingRef}          className={cn(            "absolute inset-0 transition-all duration-200",            isIntersecting ? "bg-primary/5" : "bg-transparent"          )}        >          <div className="absolute inset-0 flex items-center justify-center">            <div className="text-center">              <div className="text-2xl mb-2">🎯</div>              <div className="text-sm font-medium text-muted-foreground">                Mouse Tracking Area              </div>              <div className="text-xs text-muted-foreground mt-1">                Move your cursor here              </div>            </div>          </div>                    {/* Show position indicator only when intersecting */}          {isIntersecting && mouse.elementX !== undefined && mouse.elementY !== undefined && (            <div              className="absolute w-3 h-3 bg-primary rounded-full shadow-lg transform -translate-x-1/2 -translate-y-1/2 pointer-events-none"              style={{                left: `${mouse.elementX}px`,                top: `${mouse.elementY}px`,              }}            />          )}        </div>      </div>      {/* Position display */}      <div className="grid grid-cols-2 gap-2 text-xs">        <div className="p-2 bg-muted rounded">          <div className="font-medium">Global Position</div>          <div className="text-blue-600 font-mono">            {mouse.x}, {mouse.y}          </div>        </div>        <div className="p-2 bg-muted rounded">          <div className="font-medium">Relative Position</div>          <div className="text-purple-600 font-mono">            {isIntersecting && mouse.elementX !== undefined && mouse.elementY !== undefined              ? `${Math.round(mouse.elementX)}, ${Math.round(mouse.elementY)}`              : '-, -'            }          </div>        </div>      </div>      <div className="text-xs text-muted-foreground text-center">        {isIntersecting           ? "🎯 Mouse detected in tracking area"           : "Move mouse over the tracking area above"        }      </div>    </div>  )}export default UseMousePositionDemo