1
import { type ClassValue, clsx } from 'clsx';
2
import { twMerge } from 'tailwind-merge';
3

4
export function cn(...inputs: ClassValue[]) {
5
  return twMerge(clsx(inputs));
6
}

1
'use client';
2
import { type RefObject, useLayoutEffect, useRef, useState } from 'react';
3

4
interface MouseState {
5
  x: number | null;
6
  y: number | null;
7
  elementX: number | null;
8
  elementY: number | null;
9
  elementPositionX: number | null;
10
  elementPositionY: number | null;
11
}
12

13
export function useMouse(): [MouseState, RefObject<HTMLDivElement>] {
14
  const [state, setState] = useState<MouseState>({
15
    x: null,
16
    y: null,
17
    elementX: null,
18
    elementY: null,
19
    elementPositionX: null,
20
    elementPositionY: null,
21
  });
22

23
  const ref = useRef<HTMLDivElement | null>(null);
24

25
  useLayoutEffect(() => {
26
    const handleMouseMove = (event: MouseEvent) => {
27
      const newState: Partial<MouseState> = {
28
        x: event.pageX,
29
        y: event.pageY,
30
      };
31

32
      if (ref.current instanceof Element) {
33
        const { left, top } = ref.current.getBoundingClientRect();
34
        const elementPositionX = left + window.scrollX;
35
        const elementPositionY = top + window.scrollY;
36
        const elementX = event.pageX - elementPositionX;
37
        const elementY = event.pageY - elementPositionY;
38

39
        newState.elementX = elementX;
40
        newState.elementY = elementY;
41
        newState.elementPositionX = elementPositionX;
42
        newState.elementPositionY = elementPositionY;
43
      }
44

45
      setState((s) => ({
46
        ...s,
47
        ...newState,
48
      }));
49
    };
50

51
    document.addEventListener('mousemove', handleMouseMove);
52

53
    return () => {
54
      document.removeEventListener('mousemove', handleMouseMove);
55
    };
56
  }, []);
57

58
  return [state, ref];
59
}