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
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;