From c113f59c2019e2e83850aad72525b62ca63b833d Mon Sep 17 00:00:00 2001 From: inmake Date: Wed, 28 May 2025 18:27:33 +0500 Subject: [PATCH] Remove FloorPlanMarasiDrive component and update FloorsPage to use new FloorPlanMarasiDriveEast and FloorPlanMarasiDriveWest components based on selected floor type. --- src/components/FloorPlanMarasiDrive.tsx | 54 - src/components/FloorPlanMarasiDriveEast.tsx | 1539 +++++++++++++++++ .../FloorPlanMarasiDriveWestLower.tsx | 15 + .../FloorPlanMarasiDriveWestUpper.tsx | 13 + src/pages/FloorsPage.tsx | 27 +- 5 files changed, 1589 insertions(+), 59 deletions(-) delete mode 100644 src/components/FloorPlanMarasiDrive.tsx create mode 100644 src/components/FloorPlanMarasiDriveEast.tsx create mode 100644 src/components/FloorPlanMarasiDriveWestLower.tsx create mode 100644 src/components/FloorPlanMarasiDriveWestUpper.tsx diff --git a/src/components/FloorPlanMarasiDrive.tsx b/src/components/FloorPlanMarasiDrive.tsx deleted file mode 100644 index 4b9e58e..0000000 --- a/src/components/FloorPlanMarasiDrive.tsx +++ /dev/null @@ -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) { - return ( - - - {floorPlanMasksMarasiDrive.map((mask) => ( - { - console.log(mask.text.unitNumber); - }} - > - - - - {selectedFloor} - {mask.text.unitNumber.padStart(2, "0")} - - - {mask.text.unitType} - - - - ))} - - ); -} - -export default FloorPlanMarasiDrive; diff --git a/src/components/FloorPlanMarasiDriveEast.tsx b/src/components/FloorPlanMarasiDriveEast.tsx new file mode 100644 index 0000000..894dd63 --- /dev/null +++ b/src/components/FloorPlanMarasiDriveEast.tsx @@ -0,0 +1,1539 @@ +// import { selectedFloorPlanMasksMarasiDrive } from "../data/selectedFloor-plan-masks/marasi-drive"; + +interface FloorPlanMarasiDriveEastProps { + selectedFloor: string | null; +} + +function FloorPlanMarasiDriveEast({ + selectedFloor, +}: FloorPlanMarasiDriveEastProps & React.SVGProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {`E-${selectedFloor}16`} + + + {"1BR"} + + + + + + + + {`E-${selectedFloor}15`} + + + {"1BR"} + + + + + + + + {`E-${selectedFloor}14`} + + + {"ST"} + + + + + + + + {`E-${selectedFloor}13`} + + + {"ST"} + + + + + + + + {`E-${selectedFloor}12`} + + + {"ST"} + + + + + + + + {`E-${selectedFloor}11`} + + + {"ST"} + + + + + + + + {`E-${selectedFloor}10`} + + + {"1BR"} + + + + + + + + {`E-${selectedFloor}09`} + + + {"1BR"} + + + + + + + + {`E-${selectedFloor}08`} + + + {"1BR"} + + + + + + + + {`E-${selectedFloor}07`} + + + {"1BR"} + + + + + + + + {`E-${selectedFloor}06`} + + + {"1BR"} + + + + + + + + {`E-${selectedFloor}05`} + + + {"ST"} + + + + + + + + {`E-${selectedFloor}04`} + + + {"ST"} + + + + + + + + {`E-${selectedFloor}03`} + + + {"1BR"} + + + + + + + + {`E-${selectedFloor}02`} + + + {"ST"} + + + + + + + + {`E-${selectedFloor}01`} + + + {"2BR"} + + + + + + + ); +} + +export default FloorPlanMarasiDriveEast; diff --git a/src/components/FloorPlanMarasiDriveWestLower.tsx b/src/components/FloorPlanMarasiDriveWestLower.tsx new file mode 100644 index 0000000..90f1bb8 --- /dev/null +++ b/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) { + return ( + <>{selectedFloor} + ); +} + +export default FloorPlanMarasiDriveEast; diff --git a/src/components/FloorPlanMarasiDriveWestUpper.tsx b/src/components/FloorPlanMarasiDriveWestUpper.tsx new file mode 100644 index 0000000..4454f71 --- /dev/null +++ b/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) { + return <>{selectedFloor}; +} + +export default FloorPlanMarasiDriveEast; diff --git a/src/pages/FloorsPage.tsx b/src/pages/FloorsPage.tsx index 023da7f..8c4f21c 100644 --- a/src/pages/FloorsPage.tsx +++ b/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(null); useEffect(() => { - console.log(selectedFloor); + console.log("selectedFloor", selectedFloor?.split(" ")[0]); }, [selectedFloor]); const { data: floorsData } = useQuery({ @@ -102,9 +104,24 @@ function FloorsPage() {

{selectedFloor} floor

- + {selectedFloor.split(" ")[0] === "East" && ( + + )} + {selectedFloor.split(" ")[0] === "West" && ( + <> + {+selectedFloor.split(" ")[1] < 24 ? ( + + ) : ( + + )} + + )}
)}