feat(directory): added animated cursor

directory/src/routes/path/Home.jsx

@@ -64,6 +64,7 @@ export default function Home() {
 
   useEffect(() => {
     setContent(config?.operators || [])
+    document.documentElement.style.setProperty('--cursor-color', 'var(--text-color)');
   }, [config])
 
   const handleAduioStateChange = useCallback((e, state) => {
@@ -258,6 +259,15 @@ export default function Home() {
 function OperatorElement({ item, hidden, handleVoicePlay }) {
   const { textDefaultLang, language, alternateLang } = useLanguage()
 
+  const onMouseEnter = useCallback(() => {
+    handleVoicePlay(`/${item.link}/assets/${JSON.parse(import.meta.env.VITE_VOICE_FOLDERS).main}/${import.meta.env.VITE_APP_VOICE_URL}`)
+    document.documentElement.style.setProperty('--cursor-color', item.color);
+  }, [handleVoicePlay, item.color, item.link])
+
+  const onMouseLeave = useCallback(() => {
+    document.documentElement.style.setProperty('--cursor-color', 'var(--text-color)');
+  }, [])
+
   return useMemo(() => {
     return (
       <NavLink
@@ -266,7 +276,8 @@ function OperatorElement({ item, hidden, handleVoicePlay }) {
         hidden={hidden}
       >
         <section
-          onMouseEnter={() => handleVoicePlay(`/${item.link}/assets/${JSON.parse(import.meta.env.VITE_VOICE_FOLDERS).main}/${import.meta.env.VITE_APP_VOICE_URL}`)}
+          onMouseEnter={() => onMouseEnter()}
+          onMouseLeave={() => onMouseLeave()}
         >
           <section className={classes['background-filler']} />
           <section className={classes.outline} />
@@ -296,7 +307,7 @@ function OperatorElement({ item, hidden, handleVoicePlay }) {
         </section>
       </NavLink>
     )
-  }, [item, hidden, language, alternateLang, textDefaultLang, handleVoicePlay])
+  }, [item, hidden, language, alternateLang, textDefaultLang, onMouseEnter, onMouseLeave])
 }
 
 function VoiceSwitchElement({ src, replay, handleAduioStateChange }) {