diff --git a/cursor.jsx b/cursor.jsx index 409f6bf..0577dd2 100644 --- a/cursor.jsx +++ b/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 ( <> -
+