inmake/irth-new-client-120
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor FloorPlan components: remove unused FloorPlanDubaiMarina, update floor type from string to number in several components, and adjust related properties in projects data. Comment out Eruda initialization in main.tsx for mobile debugging.

Browse Source
This commit is contained in:
inmake
2025-07-28 12:41:26 +05:00
parent 0b9741e90f
commit 592b51a17d
18 changed files with 612 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/floor-plans/dubai-marina/floor-plan_7-38_comb.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 424 KiB

src/components/FloorPlanDubaiMarina39_40.tsx
+2 -2
View File
@@ -23,7 +23,7 @@ function FloorPlanDubaiMarinaUnit({
selectedUnit,
}: {
unit: Unit;
floor: string;
floor: number;
d: string;
textTransform: string;
formattedUnitType: string;
@@ -148,7 +148,7 @@ function FloorPlanDubaiMarina39_41({
dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
}
unit={unit}
floor={selectedFloor!}
floor={Number(selectedFloor!)}
d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
textTransform={`translate(${dubaiMarinaMasks
.get(unit.unitNo.slice(-2))!
src/components/FloorPlanDubaiMarina41_42.tsx
+2 -2
View File
@@ -23,7 +23,7 @@ function FloorPlanDubaiMarinaUnit({
selectedUnit,
}: {
unit: Unit;
floor: string;
floor: number;
d: string;
textTransform: string;
formattedUnitType: string;
@@ -148,7 +148,7 @@ function FloorPlanDubaiMarina41_42({
dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
}
unit={unit}
floor={selectedFloor!}
floor={Number(selectedFloor!)}
d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
textTransform={`translate(${dubaiMarinaMasks
.get(unit.unitNo.slice(-2))!
src/components/FloorPlanDubaiMarina.tsx → src/components/FloorPlanDubaiMarina7_38.tsx
+39 -49
View File
@@ -6,7 +6,6 @@ import UnitPopup from "./UnitPopup";
import { isMobile } from "react-device-detect";
import { useEffect, useState } from "react";
import clsx from "clsx";
import Button from "./ui/Button";
// import { useClickAway } from "@uidotdev/usehooks";
interface FloorPlanDubaiMarinaProps {
@@ -14,7 +13,7 @@ interface FloorPlanDubaiMarinaProps {
unitsOnFloor: Unit[];
}
function FloorPlanDubaiMarina({
function FloorPlanDubaiMarina7_38({
selectedFloor,
unitsOnFloor,
...props
@@ -24,56 +23,47 @@ function FloorPlanDubaiMarina({
// const ref = useClickAway<SVGSVGElement>(() => setSelectedUnit(null));
return (
<>
<div className=" w-full flex items-center justify-center gap-1">
<Button variant="cta">Standard</Button>
<Button variant="secondary" disabled>
Combinable
</Button>
</div>
<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"
// ref={ref}
{...props}
>
<image
// width={1264}
// height={935}
transform="scale(.5)"
xlinkHref="/images/floor-plans/dubai-marina/floor-plan_7-38.png"
/>
{unitsOnFloor.map((unit) =>
dubaiMarinaMasks.has(unit.unitNo.slice(-2)) ? (
<FloorPlanDubaiMarinaUnit
key={unit.unitNo}
selectedUnit={selectedUnit}
onSelect={setSelectedUnit}
formattedUnitType={
dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
}
unit={unit}
floor={selectedFloor!}
d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
textTransform={`translate(${dubaiMarinaMasks
.get(unit.unitNo.slice(-2))!
.textTransform.join(" ")})`}
/>
) : (
<Fragment key={unit.unitNo} />
)
)}
</svg>
</>
<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"
// ref={ref}
{...props}
>
<image
// width={1264}
// height={935}
transform="scale(.5)"
xlinkHref="/images/floor-plans/dubai-marina/floor-plan_7-38.png"
/>
{unitsOnFloor.map((unit) =>
dubaiMarinaMasks.has(unit.unitNo.slice(-2)) ? (
<FloorPlanDubaiMarina7_38Unit
key={unit.unitNo}
selectedUnit={selectedUnit}
onSelect={setSelectedUnit}
formattedUnitType={
dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
}
unit={unit}
floor={Number(selectedFloor!)}
d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
textTransform={`translate(${dubaiMarinaMasks
.get(unit.unitNo.slice(-2))!
.textTransform.join(" ")})`}
/>
) : (
<Fragment key={unit.unitNo} />
)
)}
</svg>
);
}
export default FloorPlanDubaiMarina;
export default FloorPlanDubaiMarina7_38;
function FloorPlanDubaiMarinaUnit({
export function FloorPlanDubaiMarina7_38Unit({
unit,
floor,
d,
@@ -83,7 +73,7 @@ function FloorPlanDubaiMarinaUnit({
selectedUnit,
}: {
unit: Unit;
floor: string;
floor: number;
d: string;
textTransform: string;
formattedUnitType: string;
src/components/FloorPlanDubaiMarina7_38Comb.tsx
+203
View File
@@ -0,0 +1,203 @@
// import { Fragment } from "react/jsx-runtime";
import { Unit } from "../types/IUnit";
import { usePopupStore } from "../stores/usePopupStore";
import UnitPopup from "./UnitPopup";
import { isMobile } from "react-device-detect";
import { useEffect, useState } from "react";
import clsx from "clsx";
import { dubaiMarinaMasks } from "../data/floor-plan-masks/dubai-marina_7-38_comb";
import { FloorPlanDubaiMarina7_38Unit } from "./FloorPlanDubaiMarina7_38";
// import Button from "./ui/Button";
// import { useClickAway } from "@uidotdev/usehooks";
interface FloorPlanDubaiMarinaCombProps {
selectedFloor: string | null;
unitsOnFloor: Unit[];
}
function FloorPlanDubaiMarina7_38Comb({
selectedFloor,
unitsOnFloor,
...props
}: FloorPlanDubaiMarinaCombProps & React.SVGProps<SVGSVGElement>) {
const [selectedUnit, setSelectedUnit] = useState<string | null>(null);
// const ref = useClickAway<SVGSVGElement>(() => setSelectedUnit(null));
console.log(unitsOnFloor);
return (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 626 465"
className="w-full h-full"
// ref={ref}
{...props}
>
<image
// width={1264}
// height={935}
transform="scale(.5)"
xlinkHref="/images/floor-plans/dubai-marina/floor-plan_7-38_comb.png"
/>
{/* {unitsOnFloor.map((unit) =>
dubaiMarinaMasks.has(unit.unitNo.slice(-2)) ? (
<FloorPlanDubaiMarina7_38CombUnit
key={unit.unitNo}
selectedUnit={selectedUnit}
onSelect={setSelectedUnit}
formattedUnitType={
dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
}
unit={unit}
floor={Number(selectedFloor!)}
d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
textTransform={`translate(${dubaiMarinaMasks
.get(unit.unitNo.slice(-2))!
.textTransform.join(" ")})`}
/>
) : (
<Fragment key={unit.unitNo} />
)
)} */}
{unitsOnFloor.map((unit) =>
!unit.unitNo.endsWith("-C") ? (
<FloorPlanDubaiMarina7_38Unit
key={unit.unitNo}
selectedUnit={selectedUnit}
onSelect={setSelectedUnit}
formattedUnitType={
dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
}
unit={unit}
floor={Number(selectedFloor!)}
d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
textTransform={`translate(${dubaiMarinaMasks
.get(unit.unitNo.slice(-2))!
.textTransform.join(" ")})`}
/>
) : (
<FloorPlanDubaiMarina7_38CombUnit
key={unit.unitNo}
selectedUnit={selectedUnit}
onSelect={setSelectedUnit}
formattedUnitType={
dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
}
unit={unit}
floor={Number(selectedFloor!)}
d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
textTransform={`translate(${dubaiMarinaMasks
.get(unit.unitNo.slice(-2))!
.textTransform.join(" ")})`}
/>
)
)}
</svg>
);
}
export default FloorPlanDubaiMarina7_38Comb;
function FloorPlanDubaiMarina7_38CombUnit({
unit,
floor,
d,
textTransform,
formattedUnitType,
onSelect,
selectedUnit,
}: {
unit: Unit;
floor: number;
d: string;
textTransform: string;
formattedUnitType: string;
selectedUnit: string | null;
onSelect: (unitNumber: string | null) => void;
}) {
const { setPopup, setSide, setPosition, popup } = usePopupStore();
function handleClick(unitNumber: string) {
window.open(`/complex/dubai-marina/${unitNumber}`, "_blank");
}
function handleMouseEnter() {
if (floor === null) return;
// onSelect(unit.unitNo);
setSide("top");
setPopup(
<UnitPopup
complexName="dubai-marina"
unitType={unit.unitType}
floor={unit.floor}
unitNumber={unit.unitNo}
squareFt={unit.squareFt}
suitesArea={unit.suitsArea}
balconyArea={unit.balconyArea}
price={unit.salesPrice}
/>
);
}
// useEffect(() => {
// if (!selectedUnit) setPopup(null);
// setSide("top");
// setPopup(
// <UnitPopup
// complexName="dubai-marina"
// unitType={unit.unitType}
// floor={unit.floor}
// unitNumber={unit.unitNo}
// squareFt={unit.squareFt}
// suitesArea={unit.suitsArea}
// balconyArea={unit.balconyArea}
// price={unit.salesPrice}
// />
// );
// }, [selectedUnit, setPopup, setSide, unit]);
useEffect(() => {
if (!popup) onSelect(null);
}, [onSelect, popup]);
// const ref = useClickAway<SVGPathElement>(
// () => !!selectedUnit && setPopup(null)
// );
return (
<g
// ref={ref}
>
<text
transform={textTransform}
className="fill-white text-[8px] select-none"
textAnchor="middle"
>
<tspan x={0} y={0}>
{unit.unitNo}
</tspan>
<tspan x={0} y={15}>
{formattedUnitType}
</tspan>
</text>
<path
onClick={() => !isMobile && handleClick(unit.unitNo)}
onMouseEnter={!isMobile ? handleMouseEnter : undefined}
onMouseLeave={() => !isMobile && setPopup(null)}
onTouchStart={(e) => {
onSelect(unit.unitNo);
setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY });
handleMouseEnter();
}}
className={clsx(
"fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors",
selectedUnit === unit.unitNo && "!fill-[#00BED7]/40"
)}
d={d}
/>
</g>
);
}
src/components/UnitMaskOnFloor.tsx
+51
View File
@@ -0,0 +1,51 @@
import { Unit } from "../types/IUnit";
import getUnitMaskOnFloor from "../utils/getUnitMaskOnFloor";
import DubaiMarinaOnFloorMask7_38Comb from "./onFloorMasks/DubaiMarinaOnFloorMask7_38Comb";
interface UnitMaskOnFloorProps {
unit: Unit;
}
function UnitMaskOnFloor({ unit }: UnitMaskOnFloorProps) {
const maskType = getUnitMaskOnFloor(unit);
if (!maskType) {
return null;
}
// Extract unit number (last 2 digits)
const unitNumber = +unit.unitNo.split("-")[0].slice(-2);
switch (maskType) {
case "dubai-marina-mask-7_38":
return <div>Dubai Marina Floor 7-38 Mask for unit {unit.unitNo}</div>;
case "dubai-marina-mask-7_38-combinable":
return <DubaiMarinaOnFloorMask7_38Comb unitNumber={unitNumber} />;
case "dubai-marina-mask-39_40":
// Handle 39-40 floor mask
return <div>Dubai Marina Floor 39-40 Mask for unit {unit.unitNo}</div>;
case "dubai-marina-mask-41_42":
// Handle 41-42 floor mask
return <div>Dubai Marina Floor 41-42 Mask for unit {unit.unitNo}</div>;
case "marasi-drive-east-mask-5_31":
// Handle Marasi Drive East mask
return <div>Marasi Drive East Mask for unit {unit.unitNo}</div>;
case "marasi-drive-west-mask-5_21":
// Handle Marasi Drive West 5-21 mask
return <div>Marasi Drive West 5-21 Mask for unit {unit.unitNo}</div>;
case "marasi-drive-west-mask-24_31":
// Handle Marasi Drive West 24-31 mask
return <div>Marasi Drive West 24-31 Mask for unit {unit.unitNo}</div>;
default:
return null;
}
}
export default UnitMaskOnFloor;
src/components/UnitPopup.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { usePopupStore } from "../stores/usePopupStore";
interface UnitPopupProps {
unitType: string;
wing?: "East" | "West";
floor: string;
floor: number;
unitNumber: string;
squareFt: number;
suitesArea: number;
src/components/UnitTypeCard.tsx
+2 -2
View File
@@ -12,9 +12,9 @@ function UnitTypeCard({ project, type }: { project: Project; type: UnitType }) {
<div className="space-y-1 2xl:space-y-[0.278vw]">
<p className="text-s text-[#00BED7]">{project.title}</p>
<div className="flex items-center gap-2 2xl:gap-[0.556vw]">
{type.wings && (
{type.wing && (
<>
<p className="text-caption-m text-[#0D1922]/70">{type.wings}</p>
<p className="text-caption-m text-[#0D1922]/70">{type.wing}</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
</>
)}
src/components/UnitTypeItem.tsx
+2 -2
View File
@@ -107,9 +107,9 @@ function UnitTypeItem({ project, type }: UnitTypeItemProps) {
<div className="2xl:space-y-[0.556vw] md:max-2xl:space-y-2 space-y-1">
<p className="text-m text-[#00BED7]">{project.title}</p>
<div className="flex items-center 2xl:gap-[0.556vw]">
{type.wings && (
{type.wing && (
<>
<p className="text-s text-[#0D1922]/70">{type.wings}</p>
<p className="text-s text-[#0D1922]/70">{type.wing}</p>
<div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC]" />
</>
)}
src/components/onFloorMasks/DubaiMarinaOnFloorMask7_38Comb.tsx
+87
View File
@@ -0,0 +1,87 @@
import clsx from "clsx";
import { useEffect } from "react";
const paths = [
{
dataName: 12,
d: "M1.47 84.79h53.29v-.31c0-.55.45-1 1-1h2.44c.55 0 1-.45 1-1V35.14c0-.55-.45-1-1-1h-1.59c-.55 0-1-.45-1-1V16.85c0-.55.45-1 1-1h20.17c.09 0 .17-.01.26-.03l52.8-14.11c3.03-.81 6.26.02 8.53 2.18l9.29 8.85c.2.19.31.45.31.72v19.71c0 .5-.4.9-.9.9s-.9.4-.9.9v47.49c0 .55.45 1 1 1h2.44c.55 0 1 .45 1 1v42.39c0 .55-.45 1-1 1h-3.76c-.55 0-1 .45-1 1v7.82c0 .55-.45 1-1 1H118.3v23.25c0 .55-.45 1-1 1h-7.72c-.55 0-1 .45-1 1v7.86c0 .55-.45 1-1 1H1.47c-.55 0-1-.45-1-1V85.79c0-.55.45-1 1-1",
},
{
dataName: 11,
d: "M154.01 127.38h3.25c.55 0 1 .45 1 1v8.31c0 .55.45 1 1 1h37.88c.55 0 1-.45 1-1v-8.3c0-.55.45-1 1-1h13.72c.55 0 1 .44 1 1v8.31c0 .55.45 1 1 1h38.33c.55 0 1-.45 1-1v-8.3c0-.55.45-1 1-1h6.08c.55 0 1-.45 1-1V34.12h1.8V15.39s.11-3.35 0-3.46l-10.27-9.5a8.01 8.01 0 0 0-9.56-1.33L219.34 15c-.15.08-.32.13-.49.13h-14.26q-.075-.165-.21-.3l-11.06-12.4a8.01 8.01 0 0 0-9.56-1.33L158.86 15c-.15.08-.32.13-.49.13h-6.3c-.55 0-1 .45-1 1v17.24c0 .41.33.74.74.74h1.17v92.26c0 .55.45 1 1 1Z",
},
{
dataName: 10,
d: "M264.53 84.48v21.73c0 .55.45 1 1 1h15.52c.55 0 1 .45 1 1v6.03c0 .55.45 1 1 1h28.02c.55 0 1 .45 1 1v20.43c0 .55.45 1 1 1h40.56c.55 0 1-.45 1-1v-7.82c0-.55.45-1 1-1h3.76c.55 0 1-.45 1-1V84.46c0-.55-.45-1-1-1h-2.44c-.55 0-1-.45-1-1V34.97c0-.5-.04-.9.46-.9s.9-.4.9-.9v-19.7c0-.27-.11-.54-.31-.72l-8.85-8.85a9 9 0 0 0-8.53-2.18l-52.8 14.11c-.08.02-.17.03-.26.03h-18.33c-.55 0-1 .45-1 1v16.29c0 .55.45 1 1 1s.75.45.75 1v47.34c0 .55-.45 1-1 1h-2.44c-.55 0-1 .45-1 1Z",
},
{
dataName: 9,
d: "M363.2 127.38h3.25c.55 0 1 .45 1 1v8.31c0 .55.45 1 1 1h37.88c.55 0 1-.45 1-1v-8.3c0-.55.45-1 1-1h13.71c.55 0 1 .45 1 1v8.31c0 .55.45 1 1 1h38.33c.55 0 1-.45 1-1v-8.3c0-.55.45-1 1-1h6.08c.55 0 1-.45 1-1V34.12h1.8V15.39s.11-3.35 0-3.46l-10.27-9.5a8.01 8.01 0 0 0-9.56-1.33L428.52 15c-.15.08-.32.13-.49.13h-13.26q-.075-.165-.21-.3L402.5 2.43a8.01 8.01 0 0 0-9.56-1.33L368.04 15c-.15.08-.32.13-.49.13h-6.3c-.55 0-1 .45-1 1v17.24c0 .41.33.74.74.74h1.17v92.26c0 .55.45 1 1 1Z",
},
{
dataName: 8,
d: "M624.85 84.79h-55.02v-1.73h-4.02V34.13h4.12V15.54L558.19 2.93a8.01 8.01 0 0 0-7.98-2.26l-53.9 14.87h-19.7v18.59h1.67v49h-3.95v44.79h5.4v9.76h26.88v23.23c0 .55.45 1 1 1h7.73c.55 0 1 .45 1 1v7.86c0 .55.45 1 1 1h107.5c.55 0 1-.45 1-1V85.78c0-.55-.45-1-1-1Z",
},
{
dataName: 7,
d: "M474.4 223.33h17.41v17.65H474.4v45.48h7.19v10.13h22.29v-4.45h12.26v-1.33h22.81v-6.06h47.75v4.76h18.55v-9.82h8.52v-94.5h-8.52v-9.82H586.7v4.76h-47.75v-6.06h-22.81v-1.33h-12.26v-4.45h-22.29v10.13h-7.19v44.9Z",
},
{
dataName: 6,
d: "M624.85 379.83h-55.02v1.7h-4.02v48.93h4.12v18.59l-11.74 12.61a8.01 8.01 0 0 1-7.98 2.26l-53.9-14.87h-19.7v-18.59h1.67v-49h-3.95v-44.79h5.4v-9.76h26.88v-23.2c0-.55.45-1 1-1h7.41c.55 0 1-.45 1-1v-7.87c0-.55.45-1 1-1h107.82c.55 0 1 .45 1 1v85c0 .55-.45 1-1 1Z",
},
{
dataName: 5,
d: "M363.2 336.76h3.25c.55 0 1-.45 1-1v-8.31c0-.55.45-1 1-1h37.88c.55 0 1 .45 1 1v8.3c0 .55.45 1 1 1h13.72c.55 0 1-.44 1-1v-8.31c0-.55.45-1 1-1h38.33c.55 0 1 .45 1 1v8.3c0 .55.45 1 1 1h6.08c.55 0 1 .45 1 1v92.25h1.8v18.73s.11 3.35 0 3.46l-10.27 9.5a8.01 8.01 0 0 1-9.56 1.33l-24.9-13.9c-.15-.08-.32-.13-.49-.13h-12.26q-.075.165-.21.3l-13.06 12.4a8.01 8.01 0 0 1-9.56 1.33l-24.9-13.9c-.15-.08-.32-.13-.49-.13h-6.3c-.55 0-1-.45-1-1v-17.24c0-.41.33-.74.74-.74h1.17v-92.26c0-.55.45-1 1-1Z",
},
{
dataName: 4,
d: "M264.53 379.64v-21.73c0-.55.45-1 1-1h15.52c.55 0 1-.45 1-1v-6.04c0-.55.45-1 1-1h28.02c.55 0 1-.45 1-1v-20.43c0-.55.45-1 1-1h40.56c.55 0 1 .45 1 1v7.82c0 .55.45 1 1 1h3.76c.55 0 1 .45 1 1v42.39c0 .55-.45 1-1 1h-2.44c-.55 0-1-.45-1-1v47.49c0 .5-.04.9.46.9s.9.4.9.9v19.71c0 .27-.11.54-.31.72l-8.85 8.85a9 9 0 0 1-8.53 2.18l-52.8-14.11a1 1 0 0 0-.26-.03h-18.33c-.55 0-1-.45-1-1v-16.29c0-.55.45-1 1-1s.75-.45.75-1v-47.34c0-.55-.45-1-1-1h-2.44c-.55 0-1-.45-1-1Z",
},
{
dataName: 3,
d: "M154.01 336.76h3.25c.55 0 1-.45 1-1v-8.31c0-.55.45-1 1-1h37.88c.55 0 1 .45 1 1v8.3c0 .55.45 1 1 1h13.71c.55 0 1-.45 1-1v-8.31c0-.55.45-1 1-1h38.33c.55 0 1 .45 1 1v8.3c0 .55.45 1 1 1h6.08c.55 0 1 .45 1 1v92.25h1.8v18.73s.11 3.35 0 3.46l-10.27 9.5a8.01 8.01 0 0 1-9.56 1.33l-24.9-13.9c-.15-.08-.32-.13-.49-.13h-12.26q-.075.165-.21.3l-13.06 12.4a8.01 8.01 0 0 1-9.56 1.33l-24.9-13.9c-.15-.08-.32-.13-.49-.13h-6.3c-.55 0-1-.45-1-1v-17.24c0-.41.33-.74.74-.74h1.17v-92.26c0-.55.45-1 1-1Z",
},
{
dataName: 2,
d: "M1.47 379.83h53.31c.08.47.49.82.98.82h2.44c.55 0 1 .45 1 1v47.34c0 .55-.45 1-1 1h-1.59c-.55 0-1 .45-1 1v16.29c0 .55.45 1 1 1h20.17c.09 0 .17.01.26.03l52.8 14.11c3.03.81 6.26-.02 8.53-2.18l9.29-8.85c.2-.19.31-.45.31-.72v-19.71c0-.49-.4-.9-.9-.9s-.9-.4-.9-.9v-47.49c0-.55.45-1 1-1h2.44c.55 0 1-.45 1-1v-42.39c0-.55-.45-1-1-1h-3.76c-.55 0-1-.45-1-1v-7.82c0-.55-.45-1-1-1H119.3c-.55 0-1-.45-1-1V303.7c0-.55-.45-1-1-1h-7.72c-.55 0-1-.45-1-1v-7.76c0-.55-.45-1-1-1H1.47c-.55 0-1 .45-1 1v84.9c0 .55.45 1 1 1Z",
},
{
dataName: 1,
d: "M1.47 84.79h53.29v-.31c0-.55.45-1 1-1h2.44c.55 0 1-.45 1-1V35.14c0-.55-.45-1-1-1h-1.59c-.55 0-1-.45-1-1V16.85c0-.55.45-1 1-1h20.17c.09 0 .17-.01.26-.03l52.8-14.11c3.03-.81 6.26.02 8.53 2.18l9.29 8.85c.2.19.31.45.31.72v19.71c0 .5-.4.9-.9.9s-.9.4-.9.9v47.49c0 .55.45 1 1 1h2.44c.55 0 1 .45 1 1v42.39c0 .55-.45 1-1 1h-3.76c-.55 0-1 .45-1 1v7.82c0 .55-.45 1-1 1H118.3v23.25c0 .55-.45 1-1 1h-7.72c-.55 0-1 .45-1 1v7.86c0 .55-.45 1-1 1H1.47c-.55 0-1-.45-1-1V85.79c0-.55.45-1 1-1",
},
];
interface DubaiMarinaOnFloorMask7_38CombProps {
unitNumber: number;
}
function DubaiMarinaOnFloorMask7_38Comb({
unitNumber,
}: DubaiMarinaOnFloorMask7_38CombProps) {
useEffect(() => {
console.log(unitNumber);
}, [unitNumber]);
return (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 626 465"
// {...props}
>
{paths.map((path) => (
<path
data-name={path.dataName}
d={path.d}
className={clsx(
"fill-red-500",
path.dataName === unitNumber ? "opacity-100" : "opacity-0"
)}
/>
))}
</svg>
);
}
export default DubaiMarinaOnFloorMask7_38Comb;
src/data/floor-plan-masks/dubai-marina_7-38_comb.ts
+100
View File
@@ -0,0 +1,100 @@
import { FloorPlanMasks } from "./marasi-drive";
export const dubaiMarinaMasks: FloorPlanMasks = new Map([
[
"01",
{
d: "M39.97,289.09h-16.7c-.55,0-1-.45-1-1v-6.52c0-.55-.45-1-1-1h-5.74c-.55,0-1-.45-1-1v-92.56c0-.55.45-1,1-1h5.78c.55,0,1-.45,1-1v-8.31c0-.55.45-1,1-1h17.34c.55,0,1,.45,1,1v2.5c0,.55.45,1,1,1h46.35c.55,0,1-.45,1-1v-3.38c0-.55.45-1,1-1h34.77c.55,0,1,.45,1,1v45.53c0,.55.45,1,1,1h7.35c.55,0,1,.45,1,1v17.28c0,.55.45,1,1,1h15.5c.55,0,1,.45,1,1v43.27c0,.55-.45,1-1,1h-5.21c-.55,0-1,.45-1,1v7.83c0,.55-.45,1-1,1h-20.77c-.55,0-1-.45-1-1v-3.39c0-.55-.45-1-1-1h-31.69c-.55,0-1-.45-1-1v-3.85c0-.55-.45-1-1-1h-46.98c-.55,0-1,.45-1,1v1.61c0,.55-.45,1-1,1h0Z",
textTransform: [67 + 15, 235],
formattedUnitType: "1 BR² — B",
},
],
[
"02",
{
d: "M4.47,380.58h53.31c.08.47.49.82.98.82h2.44c.55,0,1,.45,1,1v47.34c0,.55-.45,1-1,1h-1.59c-.55,0-1,.45-1,1v16.29c0,.55.45,1,1,1h20.17c.09,0,.17.01.26.03l52.8,14.11c3.03.81,6.26-.02,8.53-2.18l9.29-8.85c.2-.19.31-.45.31-.72v-19.71c0-.49-.4-.9-.9-.9s-.9-.4-.9-.9v-47.49c0-.55.45-1,1-1h2.44c.55,0,1-.45,1-1v-42.39c0-.55-.45-1-1-1h-3.76c-.55,0-1-.45-1-1v-7.82c0-.55-.45-1-1-1h-24.55c-.55,0-1-.45-1-1v-21.76c0-.55-.45-1-1-1h-7.72c-.55,0-1-.45-1-1v-7.76c0-.55-.45-1-1-1H4.47c-.55,0-1,.45-1,1v84.9c0,.55.45,1,1,1h0Z",
textTransform: [87 + 15, 380],
formattedUnitType: "2 BR",
},
],
[
"03",
{
d: "M157.01,337.51h3.25c.55,0,1-.45,1-1v-8.31c0-.55.45-1,1-1h37.88c.55,0,1,.45,1,1v8.3c0,.55.45,1,1,1h13.71c.55,0,1-.45,1-1v-8.31c0-.55.45-1,1-1h38.33c.55,0,1,.45,1,1v8.3c0,.55.45,1,1,1h6.08c.55,0,1,.45,1,1v92.25h1.8v18.73s.11,3.35,0,3.46l-10.27,9.5c-2.53,2.53-6.43,3.07-9.56,1.33l-24.9-13.9c-.15-.08-.32-.13-.49-.13h-12.26c-.05.11-.12.21-.21.3l-13.06,12.4c-2.53,2.53-6.43,3.07-9.56,1.33l-24.9-13.9c-.15-.08-.32-.13-.49-.13h-6.3c-.55,0-1-.45-1-1v-17.24c0-.41.33-.74.74-.74h1.17v-92.26c0-.55.45-1,1-1l.04.02Z",
textTransform: [192 + 15, 380],
formattedUnitType: "1 BR² — C",
},
],
[
"04",
{
d: "M267.53,380.39v-21.73c0-.55.45-1,1-1h15.52c.55,0,1-.45,1-1v-6.04c0-.55.45-1,1-1h28.02c.55,0,1-.45,1-1v-20.43c0-.55.45-1,1-1h40.56c.55,0,1,.45,1,1v7.82c0,.55.45,1,1,1h3.76c.55,0,1,.45,1,1v42.39c0,.55-.45,1-1,1h-2.44c-.55,0-1,.45-1,1v47.49c0,.5-.04.9.46.9s.9.4.9.9v19.71c0,.27-.11.54-.31.72l-8.85,8.85c-2.27,2.16-5.5,2.99-8.53,2.18l-52.8-14.11c-.08-.02-.17-.03-.26-.03h-18.33c-.55,0-1-.45-1-1v-16.29c0-.55.45-1,1-1s.75-.45.75-1v-47.34c0-.55-.45-1-1-1h-2.44c-.55,0-1-.45-1-1h0Z",
textTransform: [297 + 15, 380],
formattedUnitType: "1 BR² — A",
},
],
[
"05",
{
d: "M366.2,337.51h3.25c.55,0,1-.45,1-1v-8.31c0-.55.45-1,1-1h37.88c.55,0,1,.45,1,1v8.3c0,.55.45,1,1,1h13.72c.55,0,1-.44,1-1v-8.31c0-.55.45-1,1-1h38.33c.55,0,1,.45,1,1v8.3c0,.55.45,1,1,1h6.08c.55,0,1,.45,1,1v92.25h1.8v18.73s.11,3.35,0,3.46l-10.27,9.5c-2.53,2.53-6.43,3.07-9.56,1.33l-24.9-13.9c-.15-.08-.32-.13-.49-.13h-12.26c-.05.11-.12.21-.21.3l-13.06,12.4c-2.53,2.53-6.43,3.07-9.56,1.33l-24.9-13.9c-.15-.08-.32-.13-.49-.13h-6.3c-.55,0-1-.45-1-1v-17.24c0-.41.33-.74.74-.74h1.17v-92.26c0-.55.45-1,1-1l.03.02Z",
textTransform: [401 + 15, 380],
formattedUnitType: "1 BR² — C",
},
],
[
"06",
{
d: "M627.85,380.58h-55.02v1.7h-4.02v48.93h4.12v18.59l-11.74,12.61c-2.03,2.18-5.11,3.05-7.98,2.26l-53.9-14.87h-19.7v-18.59h1.67v-49h-3.95v-44.79h5.4v-9.76h26.88v-23.2c0-.55.45-1,1-1h7.41c.55,0,1-.45,1-1v-7.87c0-.55.45-1,1-1h107.82c.55,0,1,.45,1,1v85c0,.55-.45,1-1,1h.01Z",
textTransform: [505 + 15, 380],
formattedUnitType: "2 BR",
},
],
[
"07",
{
d: "M477.4,224.08h17.41v17.65h-17.41v45.48h7.19v10.13h22.29v-4.45h12.26v-1.33h22.81v-6.06h47.75v4.76h18.55v-9.82h8.52v-94.5h-8.52v-9.82h-18.55v4.76h-47.75v-6.06h-22.81v-1.33h-12.26v-4.45h-22.29v10.13h-7.19v44.9h0Z",
textTransform: [525 + 15, 229],
formattedUnitType: "1 BR — D",
},
],
[
"08",
{
d: "M627.85,85.54h-55.02v-1.73h-4.02v-48.93h4.12v-18.59l-11.74-12.61c-2.03-2.18-5.11-3.05-7.98-2.26l-53.9,14.87h-19.7v18.59h1.67v49h-3.95v44.79h5.4v9.76h26.88v23.23c0,.55.45,1,1,1h7.73c.55,0,1,.45,1,1v7.86c0,.55.45,1,1,1h107.5c.55,0,1-.45,1-1v-84.99c0-.55-.45-1-1-1h.01Z",
textTransform: [505 + 15, 78],
formattedUnitType: "2 BR",
},
],
[
"09",
{
d: "M366.2,128.13h3.25c.55,0,1,.45,1,1v8.31c0,.55.45,1,1,1h37.88c.55,0,1-.45,1-1v-8.3c0-.55.45-1,1-1h13.71c.55,0,1,.45,1,1v8.31c0,.55.45,1,1,1h38.33c.55,0,1-.45,1-1v-8.3c0-.55.45-1,1-1h6.08c.55,0,1-.45,1-1V34.87h1.8v-18.73s.11-3.35,0-3.46l-10.27-9.5c-2.53-2.53-6.43-3.07-9.56-1.33l-24.9,13.9c-.15.08-.32.13-.49.13h-13.26c-.05-.11-.12-.21-.21-.3l-12.06-12.4c-2.53-2.53-6.43-3.07-9.56-1.33l-24.9,13.9c-.15.08-.32.13-.49.13h-6.3c-.55,0-1,.45-1,1v17.24c0,.41.33.74.74.74h1.17v92.26c0,.55.45,1,1,1h.04Z",
textTransform: [401 + 15, 78],
formattedUnitType: "1 BR² — C",
},
],
[
"10",
{
d: "M267.53,85.23v21.73c0,.55.45,1,1,1h15.52c.55,0,1,.45,1,1v6.03c0,.55.45,1,1,1h28.02c.55,0,1,.45,1,1v20.43c0,.55.45,1,1,1h40.56c.55,0,1-.45,1-1v-7.82c0-.55.45-1,1-1h3.76c.55,0,1-.45,1-1v-42.39c0-.55-.45-1-1-1h-2.44c-.55,0-1-.45-1-1v-47.49c0-.5-.04-.9.46-.9s.9-.4.9-.9V14.22c0-.27-.11-.54-.31-.72l-8.85-8.85c-2.27-2.16-5.5-2.99-8.53-2.18l-52.8,14.11c-.08.02-.17.03-.26.03h-18.33c-.55,0-1,.45-1,1v16.29c0,.55.45,1,1,1s.75.45.75,1v47.34c0,.55-.45,1-1,1h-2.44c-.55,0-1,.45-1,1h0Z",
textTransform: [297 + 15, 78],
formattedUnitType: "1 BR² — A",
},
],
[
"11",
{
d: "M157.01,128.13h3.25c.55,0,1,.45,1,1v8.31c0,.55.45,1,1,1h37.88c.55,0,1-.45,1-1v-8.3c0-.55.45-1,1-1h13.72c.55,0,1,.44,1,1v8.31c0,.55.45,1,1,1h38.33c.55,0,1-.45,1-1v-8.3c0-.55.45-1,1-1h6.08c.55,0,1-.45,1-1V34.87h1.8v-18.73s.11-3.35,0-3.46l-10.27-9.5c-2.53-2.53-6.43-3.07-9.56-1.33l-24.9,13.9c-.15.08-.32.13-.49.13h-14.26c-.05-.11-.12-.21-.21-.3l-11.06-12.4c-2.53-2.53-6.43-3.07-9.56-1.33l-24.9,13.9c-.15.08-.32.13-.49.13h-6.3c-.55,0-1,.45-1,1v17.24c0,.41.33.74.74.74h1.17v92.26c0,.55.45,1,1,1h.03Z",
textTransform: [192 + 15, 78],
formattedUnitType: "1 BR² — C",
},
],
[
"12",
{
d: "M4.47,85.54h53.29v-.31c0-.55.45-1,1-1h2.44c.55,0,1-.45,1-1v-47.34c0-.55-.45-1-1-1h-1.59c-.55,0-1-.45-1-1v-16.29c0-.55.45-1,1-1h20.17c.09,0,.17-.01.26-.03l52.8-14.11c3.03-.81,6.26.02,8.53,2.18l9.29,8.85c.2.19.31.45.31.72v19.71c0,.5-.4.9-.9.9s-.9.4-.9.9v47.49c0,.55.45,1,1,1h2.44c.55,0,1,.45,1,1v42.39c0,.55-.45,1-1,1h-3.76c-.55,0-1,.45-1,1v7.82c0,.55-.45,1-1,1h-25.55v23.25c0,.55-.45,1-1,1h-7.72c-.55,0-1,.45-1,1v7.86c0,.55-.45,1-1,1H4.47c-.55,0-1-.45-1-1v-84.99c0-.55.45-1,1-1h0Z",
textTransform: [87 + 15, 78],
formattedUnitType: "2 BR",
},
],
]);
src/data/projects.ts
+28 -8
View File
@@ -9,9 +9,10 @@ export const projects: Project[] = [
{
name: "Studio Flex",
slug: "studio-flex",
wings: "West Wing",
wing: "West Wing",
floors: "Floor 5-21",
area: "341-366 Sqft",
onFloorColor: "#969495",
desc: [
"In Studio Flex explore the ORI Cloud Bed, optimizing your living space with functionality and smart living.",
"Every inch is designed to provide more space for comfort and convenience. This feature increase your unit size by 33%",
@@ -68,9 +69,10 @@ export const projects: Project[] = [
{
name: "Studio²",
slug: "studio-2",
wings: "East Wing / West Wing",
wing: "East Wing / West Wing",
floors: "Floor 5-21 / 24-31",
area: "386-416 Sqft",
onFloorColor: "#000000",
desc: [
"In Studio² experience the Flexibed, a smart innovation for modern living.",
"When folded, it unveils a spacious living room creating a cohesive space that blends both style and functionality.",
@@ -127,9 +129,10 @@ export const projects: Project[] = [
{
name: "1 Bedroom² Type A",
slug: "1-bedroom-a",
wings: "West Wing",
wing: "West Wing",
floors: "Floor 5-31",
area: "622 Sqft",
onFloorColor: "#000000",
desc: [
"In 1 Bedroom² double up your space with next generation features that enhance smart living.",
"With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -190,9 +193,10 @@ export const projects: Project[] = [
{
name: "1 Bedroom² Type B",
slug: "1-bedroom-b",
wings: "East Wing / West Wing",
wing: "East Wing / West Wing",
floors: "Floor 5-31",
area: "751-770 Sqft",
onFloorColor: "#000000",
desc: [
"In 1 Bedroom² double up your space with next generation features that enhance smart living.",
"With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -248,9 +252,10 @@ export const projects: Project[] = [
{
name: "1 Bedroom² Type C",
slug: "1-bedroom-c",
wings: "East Wing / West Wing",
wing: "East Wing / West Wing",
floors: "Floor 5-31",
area: "608-642 Sqft",
onFloorColor: "#000000",
desc: [
"In 1 Bedroom² double up your space with next generation features that enhance smart living.",
"With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -311,9 +316,10 @@ export const projects: Project[] = [
{
name: "1 Bedroom² Type D",
slug: "1-bedroom-d",
wings: "East Wing / West Wing",
wing: "East Wing / West Wing",
floors: "Floor 5-21 / 24-31",
area: "607-619 Sqft",
onFloorColor: "#000000",
desc: [
"In 1 Bedroom² double up your space with next generation features that enhance smart living.",
"With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -375,9 +381,10 @@ export const projects: Project[] = [
{
name: "2 Bedroom² Type A",
slug: "2-bedroom-a",
wings: "East Wing / West Wing",
wing: "East Wing / West Wing",
floors: "Floor 5-31",
area: "914 Sqft",
onFloorColor: "#000000",
desc: [
"In 2 Bedroom² discover extra functionality with added space and maximum value.",
"Whether you want to add a multipurpose spare room or double up your living space as a bedroom - every inch of space feels larger and works exactly how you want.",
@@ -448,9 +455,10 @@ export const projects: Project[] = [
{
name: "2 Bedroom² Type B",
slug: "2-bedroom-b",
wings: "West Wing",
wing: "West Wing",
floors: "Floor 5-31",
area: "1058 Sqft",
onFloorColor: "#000000",
desc: [
"In 2 Bedroom² discover extra functionality with added space and maximum value.",
"Whether you want to add a multipurpose spare room or double up your living space as a bedroom - every inch of space feels larger and works exactly how you want.",
@@ -558,6 +566,7 @@ export const projects: Project[] = [
slug: "studio-2-a",
floors: "Floor 7-20 / 22-38",
area: "402 Sqft",
onFloorColor: "#000000",
desc: [
"In Studio² experience the Flexibed, a smart innovation for modern living.",
"When folded, it unveils a spacious living room creating a cohesive space that blends both style and functionality.",
@@ -621,6 +630,7 @@ export const projects: Project[] = [
slug: "studio-2-b",
floors: "Floor 7-20 / 22-38",
area: "444 Sqft",
onFloorColor: "#000000",
desc: [
"In Studio² experience the Flexibed, a smart innovation for modern living.",
"When folded, it unveils a spacious living room creating a cohesive space that blends both style and functionality.",
@@ -694,6 +704,7 @@ export const projects: Project[] = [
slug: "studio-2-c",
floors: "Floor 7-20 / 22-38",
area: "460 Sqft",
onFloorColor: "#000000",
desc: [
"In Studio² experience the Flexibed, a smart innovation for modern living.",
"When folded, it unveils a spacious living room creating a cohesive space that blends both style and functionality.",
@@ -757,6 +768,7 @@ export const projects: Project[] = [
slug: "1-bedroom-a",
floors: "Floor 7-20 / 22-38",
area: "613-620 Sqft",
onFloorColor: "#000000",
desc: [
"In 1 Bedroom² double up your space with next generation features that enhance smart living.",
"With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -830,6 +842,7 @@ export const projects: Project[] = [
slug: "1-bedroom-b",
floors: "Floor 7-20 / 22-38",
area: "827 Sqft",
onFloorColor: "#000000",
desc: [
"In 1 Bedroom² double up your space with next generation features that enhance smart living.",
"With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -918,6 +931,7 @@ export const projects: Project[] = [
slug: "1-bedroom-c",
floors: "Floor 7-20 / 22-38",
area: "804 Sqft",
onFloorColor: "#000000",
desc: [
"In 1 Bedroom² double up your space with next generation features that enhance smart living.",
"With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -1011,6 +1025,7 @@ export const projects: Project[] = [
slug: "1-bedroom-d",
floors: "Floor 7-20 / 22-38",
area: "919-926 Sqft",
onFloorColor: "#000000",
desc: [
"In 1 Bedroom² double up your space with next generation features that enhance smart living.",
"With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -1104,6 +1119,7 @@ export const projects: Project[] = [
slug: "2-bedroom-a",
floors: "Floor 7-20 / 22-38",
area: "1064 Sqft",
onFloorColor: "#000000",
desc: [
"In 2 Bedroom² discover extra functionality with added space and maximum value.",
"Whether you want to add a multipurpose spare room or double up your living space as a bedroom - every inch of space feels larger and works exactly how you want.",
@@ -1217,6 +1233,7 @@ export const projects: Project[] = [
slug: "1-bedroom-loft-a",
floors: "Floor 39-40 / 41-42",
area: "1130 Sqft",
onFloorColor: "#000000",
desc: [
"In 1 Bedroom² double up your space with next generation features that enhance smart living.",
"With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -1355,6 +1372,7 @@ export const projects: Project[] = [
slug: "1-bedroom-loft-b",
floors: "Floor 39-40 / 41-42",
area: "1095 Sqft",
onFloorColor: "#000000",
desc: [
"In 1 Bedroom² double up your space with next generation features that enhance smart living.",
"With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -1487,6 +1505,7 @@ export const projects: Project[] = [
slug: "1-bedroom-loft-c",
floors: "Floor 39-40 / 41-42",
area: "1361 Sqft",
onFloorColor: "#000000",
desc: [
"In 1 Bedroom² double up your space with next generation features that enhance smart living.",
"With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!",
@@ -1619,6 +1638,7 @@ export const projects: Project[] = [
slug: "2-bedroom-loft",
floors: "Floor 39-40 / 41-42",
area: "1511 Sqft",
onFloorColor: "#000000",
desc: [
"In 2 Bedroom² discover extra functionality with added space and maximum value.",
"Whether you want to add a multipurpose spare room or double up your living space as a bedroom - every inch of space feels larger and works exactly how you want.",
src/main.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
// Initialize Eruda for mobile debugging in development
if (import.meta.env.DEV) {
import('eruda').then(eruda => eruda.default.init());
}
// if (import.meta.env.DEV) {
// import('eruda').then(eruda => eruda.default.init());
// }
import "./index.css";
import { QueryClientProvider } from "@tanstack/react-query";
src/pages/FloorsPage.tsx
+35 -6
View File
@@ -1,7 +1,7 @@
import FloorSelect, { FloorsData } from "../components/FloorSelect";
import { useParams } from "react-router";
import FloorSidebar from "../components/FloorSidebar";
import FloorPlanDubaiMarina from "../components/FloorPlanDubaiMarina";
import { useState } from "react";
import Select from "../components/ui/Select";
import { useQuery } from "@tanstack/react-query";
@@ -23,8 +23,11 @@ import { Unit } from "../types/IUnit";
import slugToComplexName from "../utils/slugToComplexName";
import { usePopupStore } from "../stores/usePopupStore";
import { isMobile } from "react-device-detect";
import FloorPlanDubaiMarina39_40 from "../components/FloorPlanDubaiMarina39_40";
import FloorPlanDubaiMarina41_42 from "../components/FloorPlanDubaiMarina41_42";
import FloorPlanDubaiMarina39_40 from "../components/FloorPlanDubaiMarina39_40";
import FloorPlanDubaiMarina7_38Comb from "../components/FloorPlanDubaiMarina7_38Comb";
import FloorPlanDubaiMarina7_38 from "../components/FloorPlanDubaiMarina7_38";
import Button from "../components/ui/Button";
function FloorsPage() {
const { complexName } = useParams();
@@ -61,6 +64,7 @@ function FloorsPage() {
});
const { setPosition, setPopup } = usePopupStore();
const [isCombinable, setIsCombinable] = useState(false);
return (
<div className="relative 2xl:h-[calc(100dvh-4.444vw)]md:max-2xl:h-[calc(100vh-64px)]h-[calc(100vh-56px)] h-full overflow-hidden">
@@ -161,6 +165,22 @@ function FloorsPage() {
/>
</div>
</div>
{/* <div className="flex items-center justify-center gap-2">
<Button
variant={!isCombinable ? "cta" : "primary"}
className="w-full"
onClick={() => setIsCombinable(false)}
>
Standard
</Button>
<Button
variant={isCombinable ? "cta" : "primary"}
className="w-full"
onClick={() => setIsCombinable(true)}
>
Combinable
</Button>
</div> */}
<div
className="2xl:py-[1.667vw] 2xl:px-[1.111vw] max-2xl:p-4 bg-[#F3F3F2] 2xl:rounded-[0.833vw] rounded-lg relative 2xl:space-y-[2.222vw] space-y-8"
onMouseMove={(e) =>
@@ -170,10 +190,19 @@ function FloorsPage() {
{selectedFloor && unitsOnFloor && (
<>
{+selectedFloor >= 7 && +selectedFloor < 39 && (
<FloorPlanDubaiMarina
selectedFloor={selectedFloor}
unitsOnFloor={unitsOnFloor}
/>
<>
{!isCombinable ? (
<FloorPlanDubaiMarina7_38
selectedFloor={selectedFloor}
unitsOnFloor={unitsOnFloor}
/>
) : (
<FloorPlanDubaiMarina7_38Comb
selectedFloor={selectedFloor}
unitsOnFloor={unitsOnFloor}
/>
)}
</>
)}
{selectedFloor === "39-40" && (
<FloorPlanDubaiMarina39_40
src/pages/UnitPage.tsx
+10
View File
@@ -15,6 +15,8 @@ import { useEffect, useState } from "react";
import UnitTypeImageWithMarkers from "../components/UnitTypeImageWithMarkers";
import { getUnitTypeVariantMarasiDrive } from "../utils/getUnitTypeVariantMarasiDrive";
import { formattedUnitTypes } from "../data/formattedUnitTypes";
import UnitMaskOnFloor from "../components/UnitMaskOnFloor";
import { isUnitCombinable } from "../utils/getUnitMaskOnFloor";
// import { useEffect } from "react";
// import PlayIcon from "../components/icons/PlayIcon";
// import { useRef } from "react";
@@ -57,6 +59,12 @@ function UnitPage() {
setUnitTypeVariantMarasiDrive(unitTypeVariantMarasiDrive);
}
if (unit) {
console.log("Unit number:", unit.unitNo);
console.log("Is combinable:", isUnitCombinable(unit));
console.log("Unit type:", unit.unitType);
}
}, [unit]);
const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
@@ -104,6 +112,8 @@ function UnitPage() {
}
/>
{unit && <UnitMaskOnFloor unit={unit} />}
{/* <img
src={`/images/unit-types/${params.complexName}/${getUnitTypeSlug(
params.complexName!,
src/types/IUnit.ts
+1 -1
View File
@@ -2,7 +2,7 @@ export interface Unit {
id: string;
unitNo: string;
project: string;
floor: string;
floor: number;
unitType: string;
unitView: string;
state: string;
src/types/UnitType.ts
+2 -1
View File
@@ -1,9 +1,10 @@
export default interface UnitType {
name: string;
slug: string;
wings?: string;
wing?: string;
floors: string;
area: string;
onFloorColor?: string;
desc: string[];
video?: {
title: string;
src/utils/getUnitMaskOnFloor.ts
+44
View File
@@ -0,0 +1,44 @@
import { Unit } from "../types/IUnit";
// Helper function to check if a unit is combinable
export function isUnitCombinable(unit: Unit): boolean {
// For Dubai Marina project, check if unit number ends with "-C"
if (unit.project === "Rove Home Dubai Marina") {
return unit.unitNo.endsWith("-C");
}
// For other projects, check if unit type contains "Combined"
return unit.unitType.includes("Combined");
}
export default function getUnitMaskOnFloor(unit: Unit) {
if (unit.project === "Rove Home Marasi Drive") {
if (unit.wing === "East") {
return "marasi-drive-east-mask-5_31";
} else if (unit.wing === "West") {
if (unit.floor >= 5 && unit.floor <= 21) {
return "marasi-drive-west-mask-5_21";
} else if (unit.floor >= 24 && unit.floor <= 31) {
return "marasi-drive-west-mask-24_31";
}
}
} else if (unit.project === "Rove Home Dubai Marina") {
if (
(unit.floor >= 7 && unit.floor <= 20) ||
(unit.floor >= 22 && unit.floor <= 38)
) {
// Check combinable
if (isUnitCombinable(unit)) {
return "dubai-marina-mask-7_38-combinable";
} else {
return "dubai-marina-mask-7_38";
}
} else if (unit.floor >= 39 && unit.floor <= 40) {
return "dubai-marina-mask-39_40";
} else if (unit.floor >= 41 && unit.floor <= 42) {
return "dubai-marina-mask-41_42";
}
}
return null;
}