design update

src/components/ui/MapMarker.tsx

@@ -1,4 +1,4 @@
-import { AdvancedMarker, Pin, useMap } from "@vis.gl/react-google-maps";
+import { AdvancedMarker, useMap } from "@vis.gl/react-google-maps";
 import type { Marker } from "@googlemaps/markerclusterer";
 import IGMapPoi from "../../types/IGMapPoi";
 
@@ -10,34 +10,38 @@ interface IGMapMarker {
 }
 
 export default function MapMarker({
-  markerKey,
   poi,
-  setMarkerRef,
   children,
+  markerKey,
+  setMarkerRef,
 }: IGMapMarker) {
   const map = useMap();
+  const { location, ignoreClusterization, label } = poi;
 
   return (
     <AdvancedMarker
+      key={markerKey}
+      position={location}
+      ref={(marker) => {
+        if (!ignoreClusterization) {
+          setMarkerRef(marker, markerKey.toString());
+        }
+      }}
       onClick={() => {
-        map?.panTo(poi.location);
+        map?.panTo(location);
         map?.setZoom(17);
       }}
-      key={markerKey}
-      position={poi.location}
-      ref={(marker) => {
-        if (!poi.ignoreClusterization)
-          setMarkerRef(marker, markerKey.toString());
-      }}
     >
-      <Pin
-        background={"transparent"}
-        glyphColor={"transparent"}
-        borderColor={"transparent"}
-        scale={poi.clickableAreaScale || 1}
+      <div
+        className={`relative flex items-center gap-x-2 hover:[&>.label-container]:opacity-100 hover:[&>.label-container]:left-[calc(100%-38px)] hover:[&>.label-container]:pointer-events-auto hover:[&>.label-container]:z-140 hover:[&>.gmap-img-container]:z-150`}
       >
-        <>{children}</>
-      </Pin>
+        {children}
+        {label && (
+          <div className="label-container text-black absolute text-s left-0 opacity-0 w-max pointer-events-none transition-[left,opacity] bg-white pl-11 pr-3 py-2.5 rounded-2xl">
+            {label}
+          </div>
+        )}
+      </div>
     </AdvancedMarker>
   );
 }