refactoring

src/components/header/Auth.tsx

@@ -1,59 +0,0 @@
-import { isMobile } from "react-device-detect";
-
-import Button from "../Button";
-
-interface AuthProps {
-  isAuth: boolean;
-  userName: string;
-}
-
-const Auth = () => {
-  const isAuth = false;
-  const userName = "Name";
-
-  return (
-    <>
-      {isMobile ? (
-        <AuthMobile isAuth={isAuth} userName={userName} />
-      ) : (
-        <AuthDesktop isAuth={isAuth} userName={userName} />
-      )}
-    </>
-  );
-};
-
-const AuthMobile = ({ isAuth, userName }: AuthProps) => {
-  return (
-    <div className="flex gap-4 p-4 text-black justify-center w-full items-center">
-      {isAuth ? (
-        <>
-          <p>{userName}</p>
-          <div className="rounded-full w-10 h-10 bg-[#E2E2DC] overflow-clip">
-            {/* <img src="" alt="avatar" className="bg-[#E2E2DC]" /> */}
-          </div>
-        </>
-      ) : (
-        <Button buttonType="cta" text="Login" className="w-full" />
-      )}
-    </div>
-  );
-};
-
-const AuthDesktop = ({ isAuth, userName }: AuthProps) => {
-  return (
-    <div className="flex gap-4 py-2 pr-6 text-black col-span-2 justify-end">
-      {isAuth ? (
-        <>
-          <p>{userName}</p>
-          <div className="rounded-full w-10 h-10 bg-[#E2E2DC] overflow-clip">
-            {/* <img src="" alt="avatar" className="bg-[#E2E2DC]" /> */}
-          </div>
-        </>
-      ) : (
-        <Button buttonType="cta" text="Login" />
-      )}
-    </div>
-  );
-};
-
-export default Auth;

src/components/header/Auth/Auth.tsx

@@ -0,0 +1,20 @@
+import { isMobile } from "react-device-detect";
+import AuthDesktop from "./AuthDesktop";
+import AuthMobile from "./AuthMobile";
+
+const Auth = () => {
+  const isAuth = false;
+  const userName = "Name";
+
+  return (
+    <>
+      {isMobile ? (
+        <AuthMobile isAuth={isAuth} userName={userName} />
+      ) : (
+        <AuthDesktop isAuth={isAuth} userName={userName} />
+      )}
+    </>
+  );
+};
+
+export default Auth;

src/components/header/Auth/AuthDesktop.tsx

@@ -0,0 +1,25 @@
+import Button from "../../Button";
+
+interface AuthProps {
+  isAuth: boolean;
+  userName: string;
+}
+
+const AuthDesktop = ({ isAuth, userName }: AuthProps) => {
+  return (
+    <div className="flex gap-4 py-2 pr-6 text-black col-span-2 justify-end">
+      {isAuth ? (
+        <>
+          <p>{userName}</p>
+          <div className="rounded-full w-10 h-10 bg-[#E2E2DC] overflow-clip">
+            {/* <img src="" alt="avatar" className="bg-[#E2E2DC]" /> */}
+          </div>
+        </>
+      ) : (
+        <Button buttonType="cta" text="Login" />
+      )}
+    </div>
+  );
+};
+
+export default AuthDesktop;

src/components/header/Auth/AuthMobile.tsx

@@ -0,0 +1,25 @@
+import Button from "../../Button";
+
+interface AuthProps {
+  isAuth: boolean;
+  userName: string;
+}
+
+const AuthMobile = ({ isAuth, userName }: AuthProps) => {
+  return (
+    <div className="flex gap-4 p-4 text-black justify-center w-full items-center">
+      {isAuth ? (
+        <>
+          <p>{userName}</p>
+          <div className="rounded-full w-10 h-10 bg-[#E2E2DC] overflow-clip">
+            {/* <img src="" alt="avatar" className="bg-[#E2E2DC]" /> */}
+          </div>
+        </>
+      ) : (
+        <Button buttonType="cta" text="Login" className="w-full" />
+      )}
+    </div>
+  );
+};
+
+export default AuthMobile;

src/components/header/Header/DesktopHeader.tsx

@@ -1,6 +1,6 @@
-import Auth from "../Auth";
+import Auth from "../Auth/Auth";
 import Logo from "../Logo";
-import Navbar from "../Navbar";
+import Navbar from "../Navbar/Navbar";
 import Location from "../Location";
 
 const DesktopHeader = () => (

src/components/header/Header/MobileHeader.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import LogoIcon from "../../icons/LogoIcon";
-import Auth from "../Auth";
-import Navbar from "../Navbar";
+import Auth from "../Auth/Auth";
+import Navbar from "../Navbar/Navbar";
 import Location from "../Location";
 
 const MobileHeader = () => {

src/components/header/Navbar.tsx

@@ -1,79 +0,0 @@
-import { useState } from "react";
-import { isMobile } from "react-device-detect";
-import { Tab } from "../../types/tab";
-import NavbarTab from "./NavbarTab";
-
-const tabs: Tab[] = [
-  {
-    value: "Masterplan",
-    id: "1",
-    count: 0,
-  },
-  {
-    value: "Search",
-    id: "2",
-    count: 0,
-  },
-  {
-    value: "Favorites",
-    id: "3",
-    count: 3,
-  },
-  {
-    value: "Company",
-    id: "4",
-    count: 0,
-  },
-];
-
-const Navbar = () => {
-  const [selectedTab, setSelectedTab] = useState<Tab | null>(null);
-  const onTabClick = (tab: Tab) => {
-    setSelectedTab(tab);
-  };
-
-  return (
-    <>
-      {isMobile ? (
-        <NavbarMobile selectedTab={selectedTab} onTabClick={onTabClick} />
-      ) : (
-        <NavbarDesktop selectedTab={selectedTab} onTabClick={onTabClick} />
-      )}
-    </>
-  );
-};
-
-interface NavbarProps {
-  selectedTab: Tab | null;
-  onTabClick: (tab: Tab) => void;
-}
-
-const NavbarDesktop = ({ selectedTab, onTabClick }: NavbarProps) => (
-  <nav className={`text-[#73787C] self-center col-span-2 justify-center flex`}>
-    {tabs.map((tab) => (
-      <NavbarTab
-        key={tab.id}
-        tab={tab}
-        isSelected={selectedTab?.id === tab.id}
-        onClick={onTabClick}
-      />
-    ))}
-  </nav>
-);
-
-const NavbarMobile = ({ selectedTab, onTabClick }: NavbarProps) => (
-  <nav
-    className={`text-[#73787C] self-center justify-center flex w-full flex-col items-center`}
-  >
-    {tabs.map((tab) => (
-      <NavbarTab
-        key={tab.id}
-        tab={tab}
-        isSelected={selectedTab?.id === tab.id}
-        onClick={onTabClick}
-      />
-    ))}
-  </nav>
-);
-
-export default Navbar;

src/components/header/Navbar/Navbar.tsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { isMobile } from "react-device-detect";
+import { Tab } from "../../../types/tab";
+import NavbarDesktop from "./NavbarDesktop";
+import NavbarMobile from "./NavbarMobile";
+
+const Navbar = () => {
+  const [selectedTab, setSelectedTab] = useState<Tab | null>(null);
+  const onTabClick = (tab: Tab) => {
+    setSelectedTab(tab);
+  };
+
+  return (
+    <>
+      {isMobile ? (
+        <NavbarMobile selectedTab={selectedTab} onTabClick={onTabClick} />
+      ) : (
+        <NavbarDesktop selectedTab={selectedTab} onTabClick={onTabClick} />
+      )}
+    </>
+  );
+};
+
+export default Navbar;

src/components/header/Navbar/NavbarDesktop.tsx

@@ -0,0 +1,23 @@
+import { tabs } from "../../../consts/tabs";
+import { Tab } from "../../../types/tab";
+import NavbarTab from "../NavbarTab";
+
+interface NavbarProps {
+  selectedTab: Tab | null;
+  onTabClick: (tab: Tab) => void;
+}
+
+const NavbarDesktop = ({ selectedTab, onTabClick }: NavbarProps) => (
+  <nav className={`text-[#73787C] self-center col-span-2 justify-center flex`}>
+    {tabs.map((tab) => (
+      <NavbarTab
+        key={tab.id}
+        tab={tab}
+        isSelected={selectedTab?.id === tab.id}
+        onClick={onTabClick}
+      />
+    ))}
+  </nav>
+);
+
+export default NavbarDesktop;

src/components/header/Navbar/NavbarMobile.tsx

@@ -0,0 +1,25 @@
+import { tabs } from "../../../consts/tabs";
+import { Tab } from "../../../types/tab";
+import NavbarTab from "../NavbarTab";
+
+interface NavbarProps {
+  selectedTab: Tab | null;
+  onTabClick: (tab: Tab) => void;
+}
+
+const NavbarMobile = ({ selectedTab, onTabClick }: NavbarProps) => (
+  <nav
+    className={`text-[#73787C] self-center justify-center flex w-full flex-col items-center`}
+  >
+    {tabs.map((tab) => (
+      <NavbarTab
+        key={tab.id}
+        tab={tab}
+        isSelected={selectedTab?.id === tab.id}
+        onClick={onTabClick}
+      />
+    ))}
+  </nav>
+);
+
+export default NavbarMobile;

src/components/map/Map.tsx

@@ -1,6 +1,5 @@
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
-import ImageMarker from "react-image-marker";
-import { MarkerComponentProps } from "react-image-marker";
+import ImageMarker, { MarkerComponentProps } from "react-image-marker";
 import { isMobile } from "react-device-detect";
 import Marker from "./Marker";
 import { markers } from "../../consts/markers";
@@ -18,6 +17,8 @@ const Map = () => {
 
   return (
     <TransformWrapper
+      initialScale={isMobile ? 2 : 1}
+      minScale={isMobile ? 2 : 1}
       alignmentAnimation={{ sizeX: 0, sizeY: 0 }}
       wheel={{ step: 1 }}
       zoomAnimation={{

src/components/map/Marker.tsx

@@ -9,7 +9,6 @@ const Marker = (props: MarkerComponentProps) => {
   );
 
   const handleOnMouseEnter = () => {
-    console.log("first");
     const hoveredMarker = currentMarker ? currentMarker : null;
     setHoveredMarker(hoveredMarker);
   };
@@ -21,24 +20,18 @@ const Marker = (props: MarkerComponentProps) => {
   return (
     <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"
-            }`}
-          >
+      <div
+        className={`flex items-end ${
+          currentMarker?.isPopupLeft ? "block" : "hidden"
+        }`}
+      >
+        <div className={`flex items-center py-2 `}>
+          <div className={`bg-white px-2 py-1 rounded-lg `}>
             {currentMarker && (
               <img src={currentMarker.popup} alt="1" width={72} height={36} />
             )}
@@ -51,6 +44,22 @@ const Marker = (props: MarkerComponentProps) => {
       <div onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
         <img src="/images/markers/1.png" alt="1" width={72} height={98} />
       </div>
+      <div
+        className={`flex items-end ${
+          currentMarker?.isPopupLeft ? "hidden" : "block"
+        }`}
+      >
+        <div className={`flex items-center py-2`}>
+          <div className="relative w-[5.5px] h-2">
+            <div className="w-0 h-0 border-y-4 border-r-8 border-l-0 border-transparent border-r-[#fff] absolute top-0 -right-[2.5px]" />
+          </div>
+          <div className={`bg-white px-2 py-1 rounded-lg`}>
+            {currentMarker && (
+              <img src={currentMarker.popup} alt="1" width={72} height={36} />
+            )}
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

src/consts/tabs.tsx

@@ -0,0 +1,26 @@
+import { Tab } from "../types/tab";
+
+const tabs: Tab[] = [
+  {
+    value: "Masterplan",
+    id: "1",
+    count: 0,
+  },
+  {
+    value: "Search",
+    id: "2",
+    count: 0,
+  },
+  {
+    value: "Favorites",
+    id: "3",
+    count: 3,
+  },
+  {
+    value: "Company",
+    id: "4",
+    count: 0,
+  },
+];
+
+export { tabs };