hover marker brightness change

src/components/map/Map.tsx

@@ -3,8 +3,10 @@ import ImageMarker from "react-image-marker";
 import { MarkerComponentProps } from "react-image-marker";
 import Marker from "./Marker";
 import { markers } from "../../consts/markers";
+import useMarker from "../../store/useMarker";
 
 const Map = () => {
+  const { hoveredMarker } = useMarker();
   const imageMarkers: MarkerComponentProps[] = markers.map((marker) => {
     return {
       top: marker.top,
@@ -34,7 +36,11 @@ const Map = () => {
           src="images/Map.jpg"
           markers={imageMarkers}
           markerComponent={Marker}
+          extraClass={`transition-all duration-300 ease-in-out ${
+            hoveredMarker ? "brightness-[.7]" : ""
+          }`}
         />
+        {/* <div className="bg-black brightness-[.7] absolute w-full h-full left-0 top-0 bg-black opacity-70 pointer-events-none"></div> */}
       </TransformComponent>
     </TransformWrapper>
   );

src/components/map/Marker.tsx

@@ -3,12 +3,13 @@ import { markers } from "../../consts/markers";
 import useMarker from "../../store/useMarker";
 
 const Marker = (props: MarkerComponentProps) => {
-  const { hoveredMarker, setHoveredMarker } = useMarker();
+  const { setHoveredMarker, hoveredMarker } = useMarker();
   const currentMarker = markers.find(
     (marker) => marker.itemNumber === props.itemNumber
   );
 
   const handleOnMouseEnter = () => {
+    console.log("first");
     const hoveredMarker = currentMarker ? currentMarker : null;
     setHoveredMarker(hoveredMarker);
   };
@@ -18,18 +19,28 @@ const Marker = (props: MarkerComponentProps) => {
   };
 
   return (
-    <div className="flex gap-1">
-      <div
-        className={`flex items-end transition-opacity duration-300 ${
-          hoveredMarker?.itemNumber === currentMarker?.itemNumber
-            ? "opacity-100"
-            : "opacity-0"
-        }`}
-      >
-        <div className="flex items-center py-2">
-          <div className="bg-white px-2 py-1 rounded-lg">
+    <div
+      className={`flex gap-1 transition-all duration-300 ease-in-out ${
+        currentMarker?.isPopupLeft ? "" : "flex-row-reverse"
+      } ${
+        hoveredMarker && hoveredMarker.itemNumber !== currentMarker?.itemNumber
+          ? "brightness-[.7]"
+          : ""
+      }`}
+    >
+      <div className={`flex items-end `}>
+        <div
+          className={`flex items-center py-2 ${
+            currentMarker?.isPopupLeft ? "" : "rotate-180"
+          }`}
+        >
+          <div
+            className={`bg-white px-2 py-1 rounded-lg ${
+              currentMarker?.isPopupLeft ? "" : "rotate-180"
+            }`}
+          >
             {currentMarker && (
-              <img src={currentMarker.popup} alt="1" width={48} height={24} />
+              <img src={currentMarker.popup} alt="1" width={72} height={36} />
             )}
           </div>
           <div className="relative w-[5.5px] h-2">
@@ -38,7 +49,7 @@ const Marker = (props: MarkerComponentProps) => {
         </div>
       </div>
       <div onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
-        <img src="/images/markers/1.png" alt="1" width={48} height={65} />
+        <img src="/images/markers/1.png" alt="1" width={72} height={98} />
       </div>
     </div>
   );

src/consts/markers.ts

@@ -2,16 +2,18 @@ import { Marker } from "../types/marker";
 
 const markers: Marker[] = [
   {
-    top: 38.5,
-    left: 51,
+    top: 37.5,
+    left: 50,
     itemNumber: 0,
     popup: "/images/markers/popups/1.svg",
+    isPopupLeft: true,
   },
   {
     top: 40.5,
-    left: 52,
+    left: 56,
     itemNumber: 1,
     popup: "/images/markers/popups/1.svg",
+    isPopupLeft: false,
   },
 ];
 

src/types/marker.ts

@@ -2,6 +2,7 @@ import { MarkerComponentProps } from "react-image-marker";
 
 type Marker = MarkerComponentProps & {
   popup: string;
+  isPopupLeft: boolean;
 };
 
 export type { Marker };