upd

src/components/icons/marks/MarkApartArea1.tsx

@@ -0,0 +1,85 @@
+interface Props {
+  x: number;
+  y: number;
+  onClick?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+}
+
+function MarkApartArea1({ x, y, onClick, onMouseEnter, onMouseLeave }: Props) {
+  return (
+    <svg
+      x={x}
+      y={y}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      xmlns="http://www.w3.org/2000/svg"
+      width={374}
+      height={242}
+      className="cursor-pointer select-none group"
+    >
+      <g>
+        <path
+          d="M1 6.19C1 3.32 3.32 1 6.19 1h361.62c4.61 0 6.93 5.56 3.69 8.84L159.56 224.37c-2 2.03-5.26 2.06-7.3.07l-18.79-18.29a5.209 5.209 0 0 0-3.62-1.47H54.8c-2.86 0-5.19 2.32-5.19 5.19v25.95c0 2.87-2.32 5.19-5.19 5.19H6.19c-2.86 0-5.19-2.32-5.19-5.19V6.19Z"
+          shapeRendering="crispEdges"
+          style={{
+            fill: "transparent",
+            strokeWidth: 2,
+          }}
+          className="stroke-[#0079C2] group-hover:stroke-white transition-all"
+        />
+        <rect
+          width={112}
+          height={40}
+          x={99}
+          y={69}
+          rx={7}
+          ry={7}
+          style={{
+            fill: "#182643",
+            strokeWidth: 0,
+          }}
+        />
+        <text
+          style={{
+            fill: "#fff",
+            fontFamily: "Inter",
+            fontSize: 14,
+          }}
+          transform="translate(144 94)"
+        >
+          <tspan x={0} y={0}>
+            {"116.8 м²"}
+          </tspan>
+        </text>
+        <rect
+          width={32}
+          height={32}
+          x={103}
+          y={73}
+          rx={4}
+          ry={4}
+          style={{
+            fill: "#0e78bd",
+            strokeWidth: 0,
+          }}
+        />
+        <text
+          style={{
+            fill: "#fff",
+            fontFamily: "Inter",
+            fontSize: 16,
+          }}
+          transform="translate(108 94)"
+        >
+          <tspan x={0} y={0}>
+            {"3К"}
+          </tspan>
+        </text>
+      </g>
+    </svg>
+  );
+}
+
+export default MarkApartArea1;

src/pages/Tower1Page.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
 import Button from "../components/Button";
 import { Transition } from "react-transition-group";
-import Tower1FloorPlan from "../components/Tower1FloorPlan";
+import Tower1FloorSelection from "../components/Tower1FloorSelection";
 
 function Tower1Page() {
   const [width, setWidth] = useState<number>();
@@ -50,7 +50,7 @@ function Tower1Page() {
             xmlns="http://www.w3.org/2000/svg"
             className="absolute z-50 top-0 left-0 w-full h-full"
           >
-            <Tower1FloorPlan
+            <Tower1FloorSelection
               x={730}
               y={565}
               // onClick={(floor) => console.log("floor", floor)}

src/pages/Tower1SelectPage.tsx

@@ -1,113 +1,38 @@
 import { useNavigate } from "react-router-dom";
-import { Mark } from "../types/Mark";
 import { useEffect, useState } from "react";
 import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
 import Button from "../components/Button";
 import { Transition } from "react-transition-group";
 import MarkLockIcon from "../components/icons/marks/MarkLockIcon";
-import MarkApartIcon from "../components/icons/marks/MarkApartIcon";
-
-const marks: Mark[] = [
-  {
-    id: "1",
-    label: "Просмотр квартиры",
-    icon: "walk",
-    x: 1040,
-    y: 710,
-    url: "1",
-    type: "apart",
-    text: "3К",
-    text2: "116.8 м2",
-  },
-  {
-    id: "2",
-    label: "Недоступно",
-    icon: "lock",
-    x: 835,
-    y: 710,
-    type: "lock",
-  },
-  {
-    id: "3",
-    label: "Недоступно",
-    icon: "lock",
-    x: 750,
-    y: 850,
-    type: "lock",
-  },
-  {
-    id: "4",
-    label: "Недоступно",
-    icon: "lock",
-    x: 1115,
-    y: 850,
-    type: "lock",
-  },
-  {
-    id: "5",
-    label: "Недоступно",
-    icon: "lock",
-    x: 720,
-    y: 970,
-    type: "lock",
-  },
-  {
-    id: "6",
-    label: "Недоступно",
-    icon: "lock",
-    x: 1150,
-    y: 970,
-    type: "lock",
-  },
-  {
-    id: "7",
-    label: "Недоступно",
-    icon: "lock",
-    x: 650,
-    y: 1155,
-    type: "lock",
-  },
-  {
-    id: "8",
-    label: "Недоступно",
-    icon: "lock",
-    x: 835,
-    y: 1190,
-    type: "lock",
-  },
-  {
-    id: "9",
-    label: "Недоступно",
-    icon: "lock",
-    x: 1035,
-    y: 1190,
-    type: "lock",
-  },
-  {
-    id: "10",
-    label: "Недоступно",
-    icon: "lock",
-    x: 1220,
-    y: 1155,
-    type: "lock",
-  },
-];
+import MarkApartArea2 from "../components/icons/marks/MarkApartArea2";
+import MarkApartArea1 from "../components/icons/marks/MarkApartArea1";
+import Tower1FloorPlan from "../components/Tower1FloorPlan";
 
 function Tower1SelectPage() {
-  const [width, setWidth] = useState<number>();
-  const [top, setTop] = useState<number>();
+  const [width, setWidth] = useState<number>(0);
+  const [top, setTop] = useState<number>(0);
   const [isLoaded, setIsLoaded] = useState(false);
   const navigate = useNavigate();
+  const [selectedArea, setSelectedArea] = useState<number | null>(null);
+  const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
 
   function handleResize() {
     setWidth(window.innerWidth);
     setTop(window.innerWidth / 2 - window.innerHeight / 2);
   }
 
+  function handleMouseMove(e: MouseEvent) {
+    setMousePos([e.clientX, e.clientY]);
+  }
+
   useEffect(() => {
     handleResize();
     window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
   }, []);
 
   function handleOnImageLoad() {
@@ -115,97 +40,80 @@ function Tower1SelectPage() {
   }
 
   return (
-    <div>
-      <div className="scene absolute w-full h-full overflow-hidden">
+    <div className="scene absolute w-full h-full overflow-hidden">
+      <div
+        className="absolute left-0"
+        style={{
+          width: `${width}px`,
+          height: `${width}px`,
+          top: `-${top}px`,
+        }}
+      >
+        <img
+          width={`${width}px`}
+          height={`${width}px`}
+          src="/images/Split_RTower.jpg"
+          alt=""
+          className=""
+          onLoad={handleOnImageLoad}
+        />
+
+        <svg
+          width="1920"
+          height="1920"
+          viewBox="0 0 1920 1920"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="absolute z-50 top-0 left-0 w-full h-full"
+        >
+          <Tower1FloorPlan x={533.3181} y={628} />
+        </svg>
+
         <div
-          className="absolute left-0"
+          className={`w-[202px] h-[200px] bg-[#002347] absolute z-50 pointer-events-none p-5 flex flex-col gap-4 transition-opacity ${
+            selectedArea ? "opacity-100" : "opacity-0"
+          }`}
           style={{
-            width: `${width}px`,
-            height: `${width}px`,
-            top: `-${top}px`,
+            top: mousePos[1] + top - 200,
+            left: mousePos[0],
           }}
         >
-          <img
-            width={`${width}px`}
-            height={`${width}px`}
-            src="/images/Split_RTower.jpg"
-            alt=""
-            className=""
-            onLoad={handleOnImageLoad}
-          />
-
-          <svg
-            width="1920"
-            height="1920"
-            viewBox="0 0 1920 1920"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className="absolute z-50 top-0 left-0 w-full h-full"
-          >
-            <MarkApartArea1
-              x={1378}
-              y={798}
-              onClick={() => navigate("1")}
-              onMouseEnter={() => setSelectedArea(1)}
-              onMouseLeave={() => setSelectedArea(null)}
-            />
-            <MarkLockIcon x={380} y={875} />
-            <MarkLockIcon x={585} y={855} />
-            <MarkLockIcon x={725} y={855} />
-            <MarkLockIcon x={1140} y={855} />
-            <MarkLockIcon x={1280} y={855} />
-            <MarkLockIcon x={585} y={1100} />
-            <MarkLockIcon x={800} y={1120} />
-            <MarkLockIcon x={1070} y={1120} />
-            <MarkLockIcon x={1280} y={1100} />
-          </svg>
-
-          <div
-            className={`w-[202px] h-[200px] bg-[#002347] absolute z-50 pointer-events-none p-5 flex flex-col gap-4 transition-opacity ${
-              selectedArea ? "opacity-100" : "opacity-0"
-            }`}
-            style={{
-              top: mousePos[1] + top - 200,
-              left: mousePos[0],
-            }}
-          >
-            <h2 className="font-tenor text-2xl leading-[26.4px]">
-              3-комнатные апартаменты
-            </h2>
-            <p className="flex gap-1 text-sm">
-              <span className="font-medium">Площадь</span>
-              <span className="text-[#9595A2]">116.8 м²</span>
+          <h2 className="font-tenor text-2xl leading-[26.4px]">
+            2-комнатные апартаменты
+          </h2>
+          <p className="flex gap-1 text-sm">
+            <span className="font-medium">Площадь</span>
+            <span className="text-[#9595A2]">116.8 м²</span>
+          </p>
+          <hr className="border-[#0079C2] opacity-40" />
+          <div className="flex flex-col">
+            <p className="text-[#9595A2] text-sm">Стоимость</p>
+            <p className="font-tenor text-xl">
+              {/* {(7500600).toLocaleString("ru")} руб. */}- руб.
             </p>
-            <hr className="border-[#0079C2] opacity-40" />
-            <div className="flex flex-col">
-              <p className="text-[#9595A2] text-sm">Стоимость</p>
-              <p className="font-tenor text-xl">
-                {/* {(7500600).toLocaleString("ru")} руб. */}- руб.
-              </p>
-            </div>
           </div>
         </div>
-        <div className="absolute left-8 bottom-8 z-50">
-          <Button
-            text="Генплан"
-            icon={<ArrowLeftIcon />}
-            widthFull
-            onClick={() => navigate("/")}
-          />
-        </div>
+      </div>
+      <div className="absolute left-8 bottom-8 z-50">
+        <Button
+          text="Выбор этажа"
+          icon={<ArrowLeftIcon />}
+          widthFull
+          onClick={() => navigate(-1)}
+        />
+      </div>
 
-        <Transition in={!isLoaded} timeout={300} mountOnEnter unmountOnExit>
-          {(state) => (
-            <div
-              className={`absolute top-0 left-0 w-full h-full flex items-center justify-center bg-neutral-950 z-50 transition-opacity duration-300 ${state}`}
-            >
-              {/* <h2 className="text-2xl font-tenor text-white whitespace-nowrap">
+      <Transition in={!isLoaded} timeout={300} mountOnEnter unmountOnExit>
+        {(state) => (
+          <div
+            className={`absolute top-0 left-0 w-full h-full flex items-center justify-center bg-neutral-950 z-50 transition-opacity duration-300 ${state}`}
+          >
+            {/* <h2 className="text-2xl font-tenor text-white whitespace-nowrap">
                 Загрузка...
               </h2> */}
-            </div>
-          )}
-        </Transition>
-      </div>
+          </div>
+        )}
+      </Transition>
     </div>
   );
 }

src/pages/Tower2Page.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
 import Button from "../components/Button";
 import { Transition } from "react-transition-group";
-import Tower2FloorPlan from "../components/Tower2FloorPlan";
+import Tower2FloorSelection from "../components/Tower2FloorSelection";
 
 function Tower2Page() {
   const [width, setWidth] = useState<number>();
@@ -51,7 +51,7 @@ function Tower2Page() {
             xmlns="http://www.w3.org/2000/svg"
             className="absolute z-50 top-0 left-0 w-full h-full"
           >
-            <Tower2FloorPlan
+            <Tower2FloorSelection
               x={747}
               y={633}
               // onClick={(floor) => console.log("floor", floor)}