Crosshair Cursor

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type CrosshairCursorProps = {  scope?: 'container' | 'window'  color?: string  verticalColor?: string  horizontalColor?: string  thickness?: number  verticalThickness?: number  horizontalThickness?: number  dashed?: boolean  gap?: number  dotSize?: number  dotColor?: string  showLabel?: boolean  label?: string  format?: (x: number, y: number) => string  labelColor?: string  labelBackground?: string  labelClassName?: string  rulers?: boolean  hideCursor?: boolean  children?: ReactNode  className?: string}export function CrosshairCursor({  scope = 'window',  color,  verticalColor,  horizontalColor,  thickness = 1,  verticalThickness,  horizontalThickness,  dashed = false,  gap = 10,  dotSize = 9,  dotColor = '#3d7bff',  showLabel = true,  label,  format,  labelColor = '#ffffff',  labelBackground = '#3d7bff',  labelClassName,  rulers = false,  hideCursor = true,  children,  className,}: CrosshairCursorProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}