From 2ae130375a9835011082d1dca8fc3f33b4a7faed Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Fri, 23 May 2025 18:30:46 +0500
Subject: [PATCH] upd

---
 src/components/FloorPopup.tsx  | 61 +++++++++++++++-------------------
 src/components/FloorSelect.tsx | 43 ++++++++++++++++++------
 src/stores/usePopupStore.ts    | 15 +++++++++
 3 files changed, 74 insertions(+), 45 deletions(-)
 create mode 100644 src/stores/usePopupStore.ts

diff --git a/src/components/FloorPopup.tsx b/src/components/FloorPopup.tsx
index 641ebed..c6b7168 100644
--- a/src/components/FloorPopup.tsx
+++ b/src/components/FloorPopup.tsx
@@ -1,12 +1,15 @@
+import { formattedUnitTypes } from "../data/formattedUnitTypes";
+import { FloorsData } from "./FloorSelect";
 import HumanIcon from "./icons/HumanIcon";
 import { AnimatePresence, motion } from "motion/react";
 
 interface FloorMarkerProps {
   title: string | null;
   position: [number, number];
+  data: FloorsData;
 }
 
-function FloorPopup({ title, position }: FloorMarkerProps) {
+function FloorPopup({ title, position, data }: FloorMarkerProps) {
   return (
     <AnimatePresence>
       {title && (
@@ -19,7 +22,7 @@ function FloorPopup({ title, position }: FloorMarkerProps) {
           style={{ top: position[1], left: position[0] }}
           className="absolute z-100 2xl:rounded-[1.111vw] 2xl:p-[1.111vw] p-4 rounded-2xl flex flex-col 2xl:gap-[1.111vw] bg-white transition-opacity duration-300 -translate-x-[calc(100%+1.25vw)] -translate-y-1/2 2xl:w-[17.222vw] md:max-2xl:w-70 w-screen"
         >
-          <div className="2xl:space-y-[0.556vw]">
+          <div className="2xl:space-y-[0.556vw] space-y-2">
             <div className="flex 2xl:gap-[0.556vw] gap-2">
               <p className="font-medium text-h5">
                 {Number.isNaN(+title.split(" ").at(-1)!)
@@ -34,9 +37,12 @@ function FloorPopup({ title, position }: FloorMarkerProps) {
             </div>
             <div className="flex 2xl:gap-[0.278vw] gap-1">
               <p className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#F3F3F2] 2xl:rounded-[0.278vw] rounded text-caption-s text-[#0D1922]/70">
-                {title && Number.isNaN((+title!.split(" ").at(-1)!)!)
+                {title && Number.isNaN(+title!.split(" ").at(-1)!)
                   ? "16 Amenties"
-                  : `8 apartments`}
+                  : `${
+                      data[title.split(" ")[0] === "East" ? "east" : "west"]
+                        .totalUnits
+                    } apartments`}
               </p>
               {!Number.isNaN(+title.split(" ").at(-1)!) && (
                 <div className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#30B216]/8 2xl:rounded-[0.278vw] rounded flex 2xl:gap-[0.278vw] gap-1">
@@ -48,39 +54,24 @@ function FloorPopup({ title, position }: FloorMarkerProps) {
               )}
             </div>
             <hr className="border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
-            <div className="2xl:space-y-[0.556vw]">
+            <div className="2xl:space-y-[0.556vw] space-y-2">
               {!Number.isNaN(+title.split(" ").at(-1)!) ? (
                 <>
-                  <div className="flex 2xl:gap-[0.556vw] gap-2">
-                    <p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
-                      4
-                    </p>
-                    <p className="text-caption-m text-[#0D1922]/70">
-                      Studio Flex
-                    </p>
-                  </div>
-                  <div className="flex 2xl:gap-[0.556vw] gap-2">
-                    <p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
-                      4
-                    </p>
-                    <p className="text-caption-m text-[#0D1922]/70">Studio²</p>
-                  </div>
-                  <div className="flex 2xl:gap-[0.556vw] gap-2">
-                    <p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
-                      4
-                    </p>
-                    <p className="text-caption-m text-[#0D1922]/70">
-                      1 Bedroom²
-                    </p>
-                  </div>
-                  <div className="flex 2xl:gap-[0.556vw] gap-2">
-                    <p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
-                      2
-                    </p>
-                    <p className="text-caption-m text-[#0D1922]/70">
-                      2 Bedroom²
-                    </p>
-                  </div>
+                  {Object.entries(
+                    data[title.split(" ")[0] === "East" ? "east" : "west"].types
+                  ).map(([unitType, count]) => (
+                    <div
+                      className="flex 2xl:gap-[0.556vw] gap-2"
+                      key={unitType}
+                    >
+                      <p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
+                        {count}
+                      </p>
+                      <p className="text-caption-m text-[#0D1922]/70">
+                        {formattedUnitTypes.get(unitType)}
+                      </p>
+                    </div>
+                  ))}
                 </>
               ) : (
                 <>
diff --git a/src/components/FloorSelect.tsx b/src/components/FloorSelect.tsx
index cd84e50..7da09fa 100644
--- a/src/components/FloorSelect.tsx
+++ b/src/components/FloorSelect.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { markers } from "../data/markers";
 import { floorsMasks } from "../data/masks";
 import Compass from "./Compass";
@@ -13,6 +13,18 @@ import FloorPopup from "./FloorPopup";
 import { useQuery } from "@tanstack/react-query";
 import { api } from "../api/ky";
 
+export interface FloorsData {
+  floor: number;
+  west: {
+    types: Record<string, number>;
+    totalUnits: number;
+  };
+  east: {
+    types: Record<string, number>;
+    totalUnits: number;
+  };
+}
+
 function FloorSelect({ complexName }: { complexName: string }) {
   const navigate = useNavigate();
 
@@ -43,14 +55,15 @@ function FloorSelect({ complexName }: { complexName: string }) {
     queryKey: ["floors-data", complexName],
     queryFn: () =>
       api
-        .get(`units/get-floors-data/${complexName}`)
-        .json<({ floor: number } & Record<string, number>)[]>(),
+        .get(
+          `units/get-floors-data/Rove Home ${complexName
+            .split("-")
+            .map((w) => w[0].toUpperCase() + w.slice(1))
+            .join(" ")}`
+        )
+        .json<FloorsData[]>(),
   });
 
-  useEffect(() => {
-    console.log(data);
-  }, [data]);
-
   return (
     <div
       className="overflow-hidden h-full w-full relative"
@@ -58,7 +71,7 @@ function FloorSelect({ complexName }: { complexName: string }) {
       onMouseMove={handleMouseMove}
     >
       <img
-        src={`/images/marasi-drive-floors.png`}
+        src={`/images/${complexName}-floors.png`}
         className="h-full w-full object-cover absolute"
         alt=""
       />
@@ -85,7 +98,7 @@ function FloorSelect({ complexName }: { complexName: string }) {
         <Button
           variant="secondary"
           className="!bg-white"
-          onClick={() => navigate(`/complex/${complexName}/`)}
+          onClick={() => navigate(`/complex/${complexName}`)}
         >
           <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
             <ArrowLeftIcon />
@@ -115,7 +128,17 @@ function FloorSelect({ complexName }: { complexName: string }) {
           onClick={handleFullScreenClick}
         />
       </div>
-      <FloorPopup title={hoveredFloor} position={position} />
+      {data && hoveredFloor && (
+        <FloorPopup
+          title={hoveredFloor}
+          position={position}
+          data={
+            data.find(
+              ({ floor }) => floor === +hoveredFloor!.split(" ").at(-1)!
+            )!
+          }
+        />
+      )}
     </div>
   );
 }
diff --git a/src/stores/usePopupStore.ts b/src/stores/usePopupStore.ts
new file mode 100644
index 0000000..d30f6e6
--- /dev/null
+++ b/src/stores/usePopupStore.ts
@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+interface PopupStore {
+  popup: React.ReactNode | null;
+  setPopup: (popup: React.ReactNode) => void;
+  position: { x: number; y: number };
+  setPosition: (position: { x: number; y: number }) => void;
+}
+
+export const usePopupStore = create<PopupStore>((set) => ({
+  popup: null,
+  setPopup: (popup: React.ReactNode) => set({ popup }),
+  position: { x: 0, y: 0 },
+  setPosition: (position: { x: number; y: number }) => set({ position }),
+}));