markers, map, button states

src/components/modals/ZoomHint.tsx

@@ -1,13 +1,57 @@
+import { useOnClickOutside } from "usehooks-ts";
+import { useEffect, useRef, useState } from "react";
 import SearchPlusIcon from "../icons/SearchIcon";
 import OpenFullscreenIcon from "../icons/OpenFullscreenIcon";
 import LineIcon from "../icons/LineIcon";
+import useModal from "../../store/useModal";
 
 const ZoomHint = () => {
+  const { setModal } = useModal();
+  const [isTransparent, setIsTransparent] = useState(false);
+  const ref = useRef(null);
+
+  const handleOnScroll = () => {
+    setIsTransparent(true);
+
+    const timeOut = setTimeout(() => {
+      setModal(null);
+      clearTimeout(timeOut);
+    }, 300);
+  };
+
+  const handleClickOutside = () => {
+    setIsTransparent(true);
+
+    const timeOut = setTimeout(() => {
+      setModal(null);
+      clearTimeout(timeOut);
+    }, 300);
+  };
+
+  useEffect(() => {
+    const map = document.querySelector(".react-transform-wrapper");
+    if (!map) return;
+    map.addEventListener("wheel", handleOnScroll);
+    return () => {
+      map.removeEventListener("wheel", handleOnScroll);
+    };
+  }, []);
+
+  useOnClickOutside(ref, handleClickOutside);
+
   return (
-    <div className="absolute z-10 m-auto top-1/2 left-1/2 flex bg-[#0D192266] p-4 text-white gap-4 items-center">
-      <SearchPlusIcon />
-      <LineIcon />
-      <OpenFullscreenIcon />
+    <div
+      className={`absolute z-10 m-auto top-1/2 left-1/2 flex flex-col items-center bg-[#0D192266] p-4 text-white gap-3 rounded-lg transition-opacity duration-300 ${
+        isTransparent ? "opacity-0" : "opacity-100"
+      }`}
+      ref={ref}
+    >
+      <div className="flex gap-4 items-center">
+        <SearchPlusIcon />
+        <LineIcon />
+        <OpenFullscreenIcon />
+      </div>
+      <p>Zoom and Move to select a location</p>
     </div>
   );
 };