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

Refactor FloorPlan components to use Unit type for selectedUnit and update floor property types from number to string. Clean up related onSelect handlers and improve unit click handling across multiple components.

Browse Source
This commit is contained in:
inmake
2025-07-28 14:19:08 +05:00
parent 4b1693bfbf
commit 818f270c90
10 changed files with 139 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FloorPlanDubaiMarina39_40.tsx
+10 -10
View File
@@ -23,17 +23,17 @@ function FloorPlanDubaiMarinaUnit({
selectedUnit,
}: {
unit: Unit;
floor: number;
floor: string | null;
d: string;
textTransform: string;
formattedUnitType: string;
selectedUnit: string | null;
onSelect: (unitNumber: string | null) => void;
selectedUnit: Unit | null;
onSelect: (unit: Unit | null) => void;
}) {
const { setPopup, setSide, setPosition, popup } = usePopupStore();
function handleClick(unitNumber: string) {
window.open(`/complex/dubai-marina/${unitNumber}`, "_blank");
function handleClick(unit: Unit) {
window.open(`/complex/dubai-marina/${unit.unitNo}`, "_blank");
}
function handleMouseEnter() {
@@ -96,17 +96,17 @@ function FloorPlanDubaiMarinaUnit({
</tspan>
</text>
<path
onClick={() => !isMobile && handleClick(unit.unitNo)}
onClick={() => !isMobile && handleClick(unit)}
onMouseEnter={!isMobile ? handleMouseEnter : undefined}
onMouseLeave={() => !isMobile && setPopup(null)}
onTouchStart={(e) => {
onSelect(unit.unitNo);
onSelect(unit);
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"
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/40"
)}
d={d}
/>
@@ -119,7 +119,7 @@ function FloorPlanDubaiMarina39_41({
unitsOnFloor,
...props
}: FloorPlanDubaiMarinaProps & React.SVGProps<SVGSVGElement>) {
const [selectedUnit, setSelectedUnit] = useState<string | null>(null);
const [selectedUnit, setSelectedUnit] = useState<Unit | null>(null);
// const ref = useClickAway<SVGSVGElement>(() => setSelectedUnit(null));
@@ -148,7 +148,7 @@ function FloorPlanDubaiMarina39_41({
dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
}
unit={unit}
floor={Number(selectedFloor!)}
floor={selectedFloor}
d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
textTransform={`translate(${dubaiMarinaMasks
.get(unit.unitNo.slice(-2))!
src/components/FloorPlanDubaiMarina41_42.tsx
+10 -10
View File
@@ -23,17 +23,17 @@ function FloorPlanDubaiMarinaUnit({
selectedUnit,
}: {
unit: Unit;
floor: number;
floor: string | null;
d: string;
textTransform: string;
formattedUnitType: string;
selectedUnit: string | null;
onSelect: (unitNumber: string | null) => void;
selectedUnit: Unit | null;
onSelect: (unit: Unit | null) => void;
}) {
const { setPopup, setSide, setPosition, popup } = usePopupStore();
function handleClick(unitNumber: string) {
window.open(`/complex/dubai-marina/${unitNumber}`, "_blank");
function handleClick(unit: Unit) {
window.open(`/complex/dubai-marina/${unit.unitNo}`, "_blank");
}
function handleMouseEnter() {
@@ -96,17 +96,17 @@ function FloorPlanDubaiMarinaUnit({
</tspan>
</text>
<path
onClick={() => !isMobile && handleClick(unit.unitNo)}
onClick={() => !isMobile && handleClick(unit)}
onMouseEnter={!isMobile ? handleMouseEnter : undefined}
onMouseLeave={() => !isMobile && setPopup(null)}
onTouchStart={(e) => {
onSelect(unit.unitNo);
onSelect(unit);
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"
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/40"
)}
d={d}
/>
@@ -119,7 +119,7 @@ function FloorPlanDubaiMarina41_42({
unitsOnFloor,
...props
}: FloorPlanDubaiMarinaProps & React.SVGProps<SVGSVGElement>) {
const [selectedUnit, setSelectedUnit] = useState<string | null>(null);
const [selectedUnit, setSelectedUnit] = useState<Unit | null>(null);
// const ref = useClickAway<SVGSVGElement>(() => setSelectedUnit(null));
@@ -148,7 +148,7 @@ function FloorPlanDubaiMarina41_42({
dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
}
unit={unit}
floor={Number(selectedFloor!)}
floor={selectedFloor}
d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
textTransform={`translate(${dubaiMarinaMasks
.get(unit.unitNo.slice(-2))!
src/components/FloorPlanDubaiMarina7_38.tsx
+10 -10
View File
@@ -18,7 +18,7 @@ function FloorPlanDubaiMarina7_38({
unitsOnFloor,
...props
}: FloorPlanDubaiMarinaProps & React.SVGProps<SVGSVGElement>) {
const [selectedUnit, setSelectedUnit] = useState<string | null>(null);
const [selectedUnit, setSelectedUnit] = useState<Unit | null>(null);
// const ref = useClickAway<SVGSVGElement>(() => setSelectedUnit(null));
@@ -47,7 +47,7 @@ function FloorPlanDubaiMarina7_38({
dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType
}
unit={unit}
floor={Number(selectedFloor!)}
floor={selectedFloor}
d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d}
textTransform={`translate(${dubaiMarinaMasks
.get(unit.unitNo.slice(-2))!
@@ -73,17 +73,17 @@ export function FloorPlanDubaiMarina7_38Unit({
selectedUnit,
}: {
unit: Unit;
floor: number;
floor: string | null;
d: string;
textTransform: string;
formattedUnitType: string;
selectedUnit: string | null;
onSelect: (unitNumber: string | null) => void;
selectedUnit: Unit | null;
onSelect: (unit: Unit | null) => void;
}) {
const { setPopup, setSide, setPosition, popup } = usePopupStore();
function handleClick(unitNumber: string) {
window.open(`/complex/dubai-marina/${unitNumber}`, "_blank");
function handleClick(unit: Unit) {
window.open(`/complex/dubai-marina/${unit.unitNo}`, "_blank");
}
function handleMouseEnter() {
@@ -146,17 +146,17 @@ export function FloorPlanDubaiMarina7_38Unit({
</tspan>
</text>
<path
onClick={() => !isMobile && handleClick(unit.unitNo)}
onClick={() => !isMobile && handleClick(unit)}
onMouseEnter={!isMobile ? handleMouseEnter : undefined}
onMouseLeave={() => !isMobile && setPopup(null)}
onTouchStart={(e) => {
onSelect(unit.unitNo);
onSelect(unit);
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"
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/40"
)}
d={d}
/>
src/components/FloorPlanDubaiMarina7_38Comb.tsx
+21 -17
View File
@@ -3,7 +3,7 @@ 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 { 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";
@@ -14,14 +14,18 @@ import { filterDuplicateUnits } from "../utils/filterDuplicateUnits";
interface FloorPlanDubaiMarinaCombProps {
selectedFloor: string | null;
unitsOnFloor: Unit[];
chosenUnit?: Unit;
}
function FloorPlanDubaiMarina7_38Comb({
selectedFloor,
unitsOnFloor,
chosenUnit,
...props
}: FloorPlanDubaiMarinaCombProps & React.SVGProps<SVGSVGElement>) {
const [selectedUnit, setSelectedUnit] = useState<string | null>(null);
const [selectedUnit, setSelectedUnit] = useState<Unit | null>(
chosenUnit || null
);
// const ref = useClickAway<SVGSVGElement>(() => setSelectedUnit(null));
@@ -82,7 +86,7 @@ function FloorPlanDubaiMarina7_38Comb({
onSelect={setSelectedUnit}
formattedUnitType={maskData.formattedUnitType}
unit={unit}
floor={Number(selectedFloor!)}
floor={selectedFloor}
d={maskData.d}
textTransform={`translate(${maskData.textTransform.join(" ")})`}
/>
@@ -93,7 +97,7 @@ function FloorPlanDubaiMarina7_38Comb({
onSelect={setSelectedUnit}
formattedUnitType={maskData.formattedUnitType}
unit={unit}
floor={Number(selectedFloor!)}
floor={selectedFloor}
d={maskData.d}
textTransform={`translate(${maskData.textTransform.join(" ")})`}
/>
@@ -114,18 +118,18 @@ function FloorPlanDubaiMarina7_38CombUnit({
onSelect,
selectedUnit,
}: {
unit: Unit;
floor: number;
d: string;
textTransform: string;
floor: string | null;
unit: Unit;
formattedUnitType: string;
selectedUnit: string | null;
onSelect: (unitNumber: string | null) => void;
selectedUnit: Unit | null;
onSelect: (unit: Unit | null) => void;
}) {
const { setPopup, setSide, setPosition, popup } = usePopupStore();
const { setPopup, setSide, setPosition } = usePopupStore();
function handleClick(unitNumber: string) {
window.open(`/complex/dubai-marina/${unitNumber}`, "_blank");
function handleClick(unit: Unit) {
window.open(`/complex/dubai-marina/${unit.unitNo}`, "_blank");
}
function handleMouseEnter() {
@@ -163,9 +167,9 @@ function FloorPlanDubaiMarina7_38CombUnit({
// );
// }, [selectedUnit, setPopup, setSide, unit]);
useEffect(() => {
if (!popup) onSelect(null);
}, [onSelect, popup]);
// useEffect(() => {
// if (!popup) onSelect(null);
// }, [onSelect, popup]);
// const ref = useClickAway<SVGPathElement>(
// () => !!selectedUnit && setPopup(null)
@@ -188,17 +192,17 @@ function FloorPlanDubaiMarina7_38CombUnit({
</tspan>
</text>
<path
onClick={() => !isMobile && handleClick(unit.unitNo)}
onClick={() => !isMobile && handleClick(unit)}
onMouseEnter={!isMobile ? handleMouseEnter : undefined}
onMouseLeave={() => !isMobile && setPopup(null)}
onTouchStart={(e) => {
onSelect(unit.unitNo);
onSelect(unit);
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"
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/40"
)}
d={d}
/>
src/components/FloorPlanMarasiDriveEast.tsx
+23 -11
View File
@@ -9,13 +9,21 @@ import clsx from "clsx";
interface FloorPlanMarasiDriveEastProps {
selectedFloor: string | null;
unitsOnFloor: Unit[];
chosenUnit?: Unit;
}
function FloorPlanMarasiDriveEast({
selectedFloor,
unitsOnFloor,
chosenUnit,
}: FloorPlanMarasiDriveEastProps & React.SVGProps<SVGSVGElement>) {
const [selectedUnit, setSelectedUnit] = useState<string | null>(null);
const [selectedUnit, setSelectedUnit] = useState<Unit | null>(
chosenUnit || null
);
useEffect(() => {
console.log("selectedUnit 1", selectedUnit);
}, [selectedUnit, chosenUnit]);
return (
<svg
@@ -1200,14 +1208,14 @@ function MarasiDriveEastFloorPlanUnit({
floor: string | null;
unit: Unit;
formattedUnitType: string;
selectedUnit: string | null;
onSelect: (unitNumber: string | null) => void;
selectedUnit: Unit | null;
onSelect: (unit: Unit | null) => void;
}) {
function handleClick(unitNumber: string) {
window.open(`/complex/marasi-drive/${unitNumber}`, "_blank");
function handleClick(unit: Unit) {
window.open(`/complex/marasi-drive/${unit.unitNo}`, "_blank");
}
const { setPopup, setSide, setPosition, popup } = usePopupStore();
const { setPopup, setSide, setPosition } = usePopupStore();
function handleMouseEnter() {
if (floor === null) return;
@@ -1227,9 +1235,13 @@ function MarasiDriveEastFloorPlanUnit({
);
}
// useEffect(() => {
// if (!popup) onSelect(null);
// }, [onSelect, popup]);
useEffect(() => {
if (!popup) onSelect(null);
}, [onSelect, popup]);
console.log("selectedUnit 2", selectedUnit);
}, [selectedUnit]);
return (
<g>
@@ -1250,18 +1262,18 @@ function MarasiDriveEastFloorPlanUnit({
</tspan>
</text>
<path
onClick={() => !isMobile && handleClick(unit.unitNo)}
onClick={() => !isMobile && handleClick(unit)}
onMouseEnter={!isMobile ? handleMouseEnter : undefined}
onMouseLeave={() => !isMobile && setPopup(null)}
onTouchStart={(e) => {
onSelect(unit.unitNo);
onSelect(unit);
setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY });
handleMouseEnter();
}}
d={d}
className={clsx(
"fill-transparent hover:fill-[#00BED7]/20 transition-all cursor-pointer",
selectedUnit === unit.unitNo && "!fill-[#00BED7]/20"
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/20"
)}
/>
</g>
src/components/FloorPlanMarasiDriveWestLower.tsx
+5 -1
View File
@@ -10,13 +10,17 @@ import { useEffect, useState } from "react";
interface FloorPlanMarasiDriveEastProps {
selectedFloor: string | null;
unitsOnFloor: Unit[];
chosenUnit?: Unit;
}
function FloorPlanMarasiDriveEast({
selectedFloor,
unitsOnFloor,
chosenUnit,
}: FloorPlanMarasiDriveEastProps & React.SVGProps<SVGSVGElement>) {
const [selectedUnit, setSelectedUnit] = useState<string | null>(null);
const [selectedUnit, setSelectedUnit] = useState<Unit | null>(
chosenUnit || null
);
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 619.96 585.99">
src/components/OnFloorMask.tsx
+36
View File
@@ -0,0 +1,36 @@
import { Unit } from "../types/IUnit";
import FloorPlanMarasiDriveEast from "./FloorPlanMarasiDriveEast";
import FloorPlanMarasiDriveWestLower from "./FloorPlanMarasiDriveWestLower";
import FloorPlanMarasiDriveWestUpper from "./FloorPlanMarasiDriveWestUpper";
function OnFloorMask({ unit }: { unit: Unit }) {
if (unit.project === "Rove Home Marasi Drive") {
if (unit.wing === "East") {
return (
<FloorPlanMarasiDriveEast
selectedFloor={null}
unitsOnFloor={[unit]}
chosenUnit={unit}
/>
);
} else if (unit.wing === "West") {
if (unit.floor >= 5 && unit.floor <= 21) {
return (
<FloorPlanMarasiDriveWestLower
selectedFloor={unit.floor.toString()}
unitsOnFloor={[unit]}
/>
);
} else if (unit.floor >= 24 && unit.floor <= 31) {
return (
<FloorPlanMarasiDriveWestUpper
selectedFloor={unit.floor.toString()}
unitsOnFloor={[unit]}
/>
);
}
}
}
}
export default OnFloorMask;
src/components/UnitSlider.tsx
+23 -1
View File
@@ -7,13 +7,16 @@ import ChevronLeftIcon from "./icons/ChevronLeftIcon";
import ChevronRightIcon from "./icons/ChevronRightIcon";
import { useSwipeable } from "react-swipeable";
import clsx from "clsx";
import { Unit } from "../types/IUnit";
import OnFloorMask from "./OnFloorMask";
interface UnitSliderProps {
unitTypeVariant: string;
complexName: string;
unit?: Unit;
}
// костыль: в Мараси 2 bedroom b ЕДИНСТВЕННАЯ НЕ ЗЕРКАЛЬНАЯ ХАТА среди всех
function UnitSlider({ unitTypeVariant, complexName }: UnitSliderProps) {
function UnitSlider({ unitTypeVariant, complexName, unit }: UnitSliderProps) {
const [hasSide, setHasSide] = useState(false);
const [selectedSide, setSelectedSide] = useState<"left" | "right">();
@@ -48,6 +51,12 @@ function UnitSlider({ unitTypeVariant, complexName }: UnitSliderProps) {
trackMouse: true,
});
useEffect(() => {
if (unit) {
console.log("unit", unit);
}
}, [unit]);
return (
<div
className="relative w-full h-full overflow-hidden bg-[#F3F3F2] 2xl:rounded-[1.111vw] rounded-xl group"
@@ -197,6 +206,13 @@ function UnitSlider({ unitTypeVariant, complexName }: UnitSliderProps) {
className="object-cover h-full pointer-events-none 2xl:rounded-[1.111vw] rounded-2xl"
/>
</div>
<div className="w-full h-full shrink-0 p-16">
{unit && (
<svg className="aspect-video">
<OnFloorMask unit={unit} />
</svg>
)}
</div>
</motion.div>
<AnimatePresence mode="wait">
{!hasSide &&
@@ -263,6 +279,7 @@ function UnitSlider({ unitTypeVariant, complexName }: UnitSliderProps) {
Layout
</Button>
)}
<Button
variant={currentSlide === (isLoft ? 2 : 1) ? "cta" : "secondary"}
onClick={() => setCurrentSlide(isLoft ? 2 : 1)}
@@ -270,6 +287,11 @@ function UnitSlider({ unitTypeVariant, complexName }: UnitSliderProps) {
>
Interior
</Button>
{unit && (
<Button variant="secondary" onClick={() => setCurrentSlide(2)}>
On the floor
</Button>
)}
{Array.from({ length: isLoft ? 3 : 2 }).map((_, index) => (
<div
key={index}
src/components/onFloorMasks/DubaiMarinaOnFloorMask7_38Comb.tsx
-87
View File
@@ -1,87 +0,0 @@
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/pages/UnitPage.tsx
+1
View File
@@ -103,6 +103,7 @@ function UnitPage() {
: getUnitTypeVariantDubaiMarina(unit.unitNo, selectedFloor)
}
complexName={params.complexName!}
unit={unit}
/>
<img
src={`/images/unit-types/${params.complexName}/${getUnitTypeSlug(