Updated custom cursor

cursor.jsx

@@ -1,20 +1,39 @@
 "use client";
-import { useEffect, useRef } from 'react';
+import {createContext, useContext, useEffect, useRef, useState} from 'react';
 import { gsap } from 'gsap';
 
-const CustomCursor = ({ isHoveringButton }) => {
+const CursorContext = createContext();
+
+export function CursorProvider ({ hidden, enabled, children }) {
+    const [isCursorHidden, setIsCursorHidden] = useState(hidden);
+    const [isCursorEnabled, setIsCursorEnabled] = useState(enabled);
+    const [isCursorInViewport, setIsCursorInViewport] = useState(false);
+
+    const toggleCursor = () => setIsCursorHidden(!isCursorHidden);
+    const toggleCursorEnabled = () => {
+        setIsCursorEnabled(!isCursorEnabled);
+        localStorage.setItem('cursorEnabled', JSON.stringify(!isCursorEnabled));
+    }
+
     const cursorRef = useRef(null);
 
     useEffect(() => {
         const moveCursor = (e) => {
             const { clientX: x, clientY: y } = e;
 
+            setIsCursorInViewport((x > 0 && x < window.innerWidth) && (y > 0 && y < window.innerHeight));
+
             gsap.to(cursorRef.current, {
                 x: x - 16,
                 y: y - 16,
                 duration: 0.1,
                 ease: "power3.out",
             });
+
+            const savedCursorState = localStorage.getItem('cursorEnabled');
+            if (savedCursorState !== null) {
+                setIsCursorEnabled(JSON.parse(savedCursorState));
+            }
         };
 
         window.addEventListener('mousemove', moveCursor);
@@ -24,14 +43,31 @@ const CustomCursor = ({ isHoveringButton }) => {
         };
     }, []);
 
+    useEffect(() => {
+        const htmlElement = document.documentElement;
+        if (isCursorEnabled) {
+            htmlElement.classList.add('custom-cursor-enabled-env');
+        } else {
+            htmlElement.classList.remove('custom-cursor-enabled-env');
+        }
+    }, [isCursorEnabled]);
+
     return (
         <>
-            <div
-                ref={cursorRef}
-                className={`pointer-events-none fixed top-0 left-0 ${isHoveringButton ? 'invisible' : ''} w-10 h-10 bg-white rounded-full z-50 mix-blend-difference`}
-            />
+            <CursorContext.Provider value={{isCustomCursorHidden: isCursorHidden, isCustomCursorEnabled: isCursorEnabled, toggleCursor, toggleCursorEnabled}}>
+                {isCursorEnabled ?
+                    <div
+                        ref={cursorRef}
+                        className={`pointer-events-none fixed top-0 left-0 ${isCursorHidden || !isCursorEnabled || !isCursorInViewport ? 'invisible' : ''} w-10 h-10 bg-white rounded-full z-50 mix-blend-difference`}
+                    />
+                    : null
+                }
+                {children}
+            </CursorContext.Provider>
         </>
     );
-};
+}
 
-export default CustomCursor;
+export function useCursor() {
+    return useContext(CursorContext);
+}