make cursor variant can access from any component

src/App.jsx

@@ -26,14 +26,22 @@ import UseFetchHookTest from "./pages/CustomHooks/use-fetch/test";
 import UseOnClickOutsideTest from "./pages/CustomHooks/use-outside-click/test";
 import { UseWindowResizeTest } from "./pages/CustomHooks/use-window-resize/test";
 import ScrollToSection from "./pages/ScrollToSection";
+import { useState } from "react";
+import Cursor from "./components/Cursor";
 
 function App() {
+  const [cursorVariant, setCursorVariant] = useState("default");
+
   return (
     <ThemeProvider defaultTheme="system" storageKey="ui-theme">
-      <Header />
+      <Header setCursorVariant={setCursorVariant} />
       <Routes>
         <Route path="React-Projects">
-          <Route index element={<Home />} />
+          <Route
+            index
+            element={<HomeWithCursor cursorVariant={cursorVariant} />}
+          />
+
           {/* Accordion component */}
           <Route path="accordion" element={<Accordion />} />
           {/* Random color generator */}
@@ -97,4 +105,13 @@ function App() {
   );
 }
 
+function HomeWithCursor({ cursorVariant }) {
+  return (
+    <>
+      <Home />
+      <Cursor cursorVariant={cursorVariant} />
+    </>
+  );
+}
+
 export default App;

src/components/Cursor.jsx

@@ -32,7 +32,7 @@ const Cursor = ({ cursorVariant }) => {
     },
     link: {
       scale: 3,
-    }
+    },
   };
 
   return (

src/layouts/header.jsx

@@ -11,13 +11,11 @@ import { Button } from "@/components/ui/button";
 import { useTheme } from "@/components/theme-provider";
 import { useEffect } from "react";
 
-function Header() {
+function Header({ setCursorVariant }) {
   const { theme, setTheme } = useTheme();
 
   useEffect(() => {
-    // Set the theme based on system preference
     if (theme === "system") {
-      // Use the system's color scheme preference
       setTheme(
         window.matchMedia("(prefers-color-scheme: dark)")?.matches
           ? "dark"
@@ -29,8 +27,13 @@ function Header() {
   return (
     <header className="bg-background px-6 py-3 backdrop-blur-2xl">
       <div className="container flex justify-between items-center">
-        <Logo />
-        <Navigation />
+        <span
+          onMouseEnter={() => setCursorVariant("text")}
+          onMouseLeave={() => setCursorVariant("default")}
+        >
+          <Logo />
+        </span>
+        <Navigation setCursorVariant={setCursorVariant} />
       </div>
     </header>
   );
@@ -49,17 +52,28 @@ function Logo() {
   );
 }
 
-function Navigation() {
+function Navigation({ setCursorVariant }) {
   const { theme } = useTheme();
 
   return (
     <nav className="flex items-center gap-2 sm:gap-6">
-      <DonateToPalestine />
-      <NavLinks
-        logo={theme === "dark" ? githubLogoDark : githubLogoLight}
-        name="Github"
-        link="https://github.com/No0ne003/React-Project"
-      />
+      <span
+        onMouseEnter={() => setCursorVariant("text")}
+        onMouseLeave={() => setCursorVariant("default")}
+      >
+        <DonateToPalestine />
+      </span>
+      <span
+        onMouseEnter={() => setCursorVariant("text")}
+        onMouseLeave={() => setCursorVariant("default")}
+      >
+        <NavLinks
+          logo={theme === "dark" ? githubLogoDark : githubLogoLight}
+          name="Github"
+          link="https://github.com/No0ne003/React-Project"
+        />
+      </span>
+
       <ModeToggle />
     </nav>
   );

src/pages/Home.jsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import Cursor from "@/components/Cursor";
 import { projects } from "@/data/projects";
 import { Link } from "react-router-dom";
 
@@ -33,7 +32,6 @@ function Home() {
         </Link>
       ))}
 
-      <Cursor cursorVariant={cursorVariant} />
     </div>
   );
 }