Remove FloorPlanMarasiDrive component and update FloorsPage to use new FloorPlanMarasiDriveEast and FloorPlanMarasiDriveWest components based on selected floor type.

src/components/FloorPlanMarasiDrive.tsx

@@ -1,54 +0,0 @@
-import { floorPlanMasksMarasiDrive } from "../data/floor-plan-masks/marasi-drive";
-
-interface FloorPlanMarasiDriveProps {
-  selectedFloor: string | null;
-}
-
-function FloorPlanMarasiDrive({
-  selectedFloor,
-  ...props
-}: FloorPlanMarasiDriveProps & React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      viewBox="0 0 632 467.5"
-      className="w-full h-full"
-      {...props}
-    >
-      <image
-        // width={1264}
-        // height={935}
-        transform="scale(.5)"
-        xlinkHref="/images/floor-plans/marasi-drive.png"
-      />
-      {floorPlanMasksMarasiDrive.map((mask) => (
-        <g
-          key={mask.id}
-          data-name={mask.id}
-          className="fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors"
-          onClick={() => {
-            console.log(mask.text.unitNumber);
-          }}
-        >
-          <path d={mask.path} />
-          <text
-            transform={`translate(${mask.text.x} ${mask.text.y})`}
-            className="fill-white text-[8px] select-none"
-            textAnchor="middle"
-          >
-            <tspan x={0} y={0}>
-              {selectedFloor}
-              {mask.text.unitNumber.padStart(2, "0")}
-            </tspan>
-            <tspan x={0} y={15}>
-              {mask.text.unitType}
-            </tspan>
-          </text>
-        </g>
-      ))}
-    </svg>
-  );
-}
-
-export default FloorPlanMarasiDrive;

src/components/FloorPlanMarasiDriveWestLower.tsx

@@ -0,0 +1,15 @@
+// import { selectedFloorPlanMasksMarasiDrive } from "../data/selectedFloor-plan-masks/marasi-drive";
+
+interface FloorPlanMarasiDriveEastProps {
+  selectedFloor: string | null;
+}
+
+function FloorPlanMarasiDriveEast({
+  selectedFloor,
+}: FloorPlanMarasiDriveEastProps & React.SVGProps<SVGSVGElement>) {
+  return (
+    <>{selectedFloor}</>
+  );
+}
+
+export default FloorPlanMarasiDriveEast;

src/components/FloorPlanMarasiDriveWestUpper.tsx

@@ -0,0 +1,13 @@
+// import { selectedFloorPlanMasksMarasiDrive } from "../data/selectedFloor-plan-masks/marasi-drive";
+
+interface FloorPlanMarasiDriveEastProps {
+  selectedFloor: string | null;
+}
+
+function FloorPlanMarasiDriveEast({
+  selectedFloor,
+}: FloorPlanMarasiDriveEastProps & React.SVGProps<SVGSVGElement>) {
+  return <>{selectedFloor}</>;
+}
+
+export default FloorPlanMarasiDriveEast;

src/pages/FloorsPage.tsx

@@ -7,7 +7,7 @@ import Select from "../components/ui/Select";
 import { useQuery } from "@tanstack/react-query";
 import { api } from "../api/ky";
 import UnitTypeBadge from "../components/UnitTypeBadge";
-import FloorPlanMarasiDrive from "../components/FloorPlanMarasiDrive";
+import FloorPlanMarasiDriveEast from "../components/FloorPlanMarasiDriveEast";
 import RooftopMarasiDrive from "../components/floor-plans/marasi-drive/RooftopMarasiDrive";
 import GroundMarasiDrive from "../components/floor-plans/marasi-drive/GroundMarasiDrive";
 import PodiumMarasiDrive from "../components/floor-plans/marasi-drive/PodiumMarasiDrive";
@@ -16,13 +16,15 @@ import Badge from "../components/ui/Badge";
 import RooftopDubaiMarina from "../components/floor-plans/dubai-marina/RooftopDubaiMarina";
 import GroundDubaiMarina from "../components/floor-plans/dubai-marina/GroundDubaiMarina";
 import PodiumDubaiMarina from "../components/floor-plans/dubai-marina/PodiumDubaiMarina";
+import FloorPlanMarasiDriveWestLower from "../components/FloorPlanMarasiDriveWestLower";
+import FloorPlanMarasiDriveWestUpper from "../components/FloorPlanMarasiDriveWestUpper";
 
 function FloorsPage() {
   const { complexName } = useParams();
   const [selectedFloor, setSelectedFloor] = useState<string | null>(null);
 
   useEffect(() => {
-    console.log(selectedFloor);
+    console.log("selectedFloor", selectedFloor?.split(" ")[0]);
   }, [selectedFloor]);
 
   const { data: floorsData } = useQuery({
@@ -102,9 +104,24 @@ function FloorsPage() {
                   <p className="text-h4 font-medium">{selectedFloor} floor</p>
                 </div>
                 <div className="p-[1.111vw] bg-[#F3F3F2] rounded-[0.833vw]">
-                  <FloorPlanMarasiDrive
-                    selectedFloor={selectedFloor.split(" ").at(-1)!}
-                  />
+                  {selectedFloor.split(" ")[0] === "East" && (
+                    <FloorPlanMarasiDriveEast
+                      selectedFloor={selectedFloor.split(" ").at(-1)!}
+                    />
+                  )}
+                  {selectedFloor.split(" ")[0] === "West" && (
+                    <>
+                      {+selectedFloor.split(" ")[1] < 24 ? (
+                        <FloorPlanMarasiDriveWestLower
+                          selectedFloor={selectedFloor.split(" ").at(-1)!}
+                        />
+                      ) : (
+                        <FloorPlanMarasiDriveWestUpper
+                          selectedFloor={selectedFloor.split(" ").at(-1)!}
+                        />
+                      )}
+                    </>
+                  )}
                 </div>
               </div>
             )}