Update environment configuration, replace room masks with floor plan masks in FloorPlanDubaiMarina component, enhance FloorSelect component for better floor selection handling, adjust FloorSidebar button size, and remove unused room-masks data. Add new floor plan components for Marasi Drive in FloorsPage.
This commit is contained in:
@@ -1,2 +1,2 @@
|
||||
VITE_API_URL=http://localhost:4002
|
||||
# VITE_API_URL=http://194.26.138.94:4002
|
||||
# VITE_API_URL=http://localhost:4002
|
||||
VITE_API_URL=http://194.26.138.94:4002
|
||||
|
Before Width: | Height: | Size: 453 KiB After Width: | Height: | Size: 453 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
@@ -1,4 +1,4 @@
|
||||
import { rooms } from "../data/room-masks/dubai-marina";
|
||||
import { floorPlanMasksDubaiMarina } from "../data/floor-plan-masks/dubai-marina";
|
||||
|
||||
interface FloorPlanDubaiMarinaProps {
|
||||
selectedFloor: string | null;
|
||||
@@ -20,29 +20,29 @@ function FloorPlanDubaiMarina({
|
||||
// width={1264}
|
||||
// height={935}
|
||||
transform="scale(.5)"
|
||||
xlinkHref="/images/test.png"
|
||||
xlinkHref="/images/floor-plans/dubai-marina/floor-plan_7-38.png"
|
||||
/>
|
||||
{rooms.map((room) => (
|
||||
{floorPlanMasksDubaiMarina.map((mask) => (
|
||||
<g
|
||||
key={room.id}
|
||||
data-name={room.id}
|
||||
key={mask.id}
|
||||
data-name={mask.id}
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors"
|
||||
onClick={() => {
|
||||
console.log(room.text.unitNumber);
|
||||
console.log(mask.text.unitNumber);
|
||||
}}
|
||||
>
|
||||
<path d={room.path} />
|
||||
<path d={mask.path} />
|
||||
<text
|
||||
transform={`translate(${room.text.x} ${room.text.y})`}
|
||||
transform={`translate(${mask.text.x} ${mask.text.y})`}
|
||||
className="fill-white text-[9px] select-none"
|
||||
textAnchor="middle"
|
||||
>
|
||||
<tspan x={0} y={0}>
|
||||
{selectedFloor}
|
||||
{room.text.unitNumber.padStart(2, "0")}
|
||||
{mask.text.unitNumber.padStart(2, "0")}
|
||||
</tspan>
|
||||
<tspan x={0} y={15}>
|
||||
{room.text.unitType}
|
||||
{mask.text.unitType}
|
||||
</tspan>
|
||||
</text>
|
||||
</g>
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
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-[9px] 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;
|
||||
@@ -78,7 +78,13 @@ function FloorSelect({
|
||||
});
|
||||
|
||||
function handleFloorClick(floor: string) {
|
||||
onSelect(floor.split(" ").at(-1)!);
|
||||
if (
|
||||
["Rooftop", "Ground Level", "Podium Level", "Sky Garden"].includes(floor)
|
||||
) {
|
||||
onSelect(floor);
|
||||
} else {
|
||||
onSelect(floor.split(" ").at(-1)!);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -112,7 +118,15 @@ function FloorSelect({
|
||||
d={d}
|
||||
className={clsx(
|
||||
"fill-[#00BED7] cursor-pointer transition-opacity duration-300 hover:opacity-60 peer",
|
||||
selectedFloor === floorTitle.split(" ").at(-1)
|
||||
selectedFloor ===
|
||||
([
|
||||
"Rooftop",
|
||||
"Ground Level",
|
||||
"Podium Level",
|
||||
"Sky Garden",
|
||||
].includes(floorTitle)
|
||||
? floorTitle
|
||||
: floorTitle.split(" ").at(-1)!)
|
||||
? "opacity-60"
|
||||
: "opacity-20"
|
||||
)}
|
||||
|
||||
@@ -26,7 +26,7 @@ function FloorSidebar({
|
||||
className="absolute top-[1.667vw] right-[1.667vw]"
|
||||
onClick={onClose}
|
||||
>
|
||||
<span className="w-[1.667vw] h-[1.667vw]">
|
||||
<span className="w-[1.389vw] h-[1.389vw]">
|
||||
<CloseIcon />
|
||||
</span>
|
||||
</Button>
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
function GroundMarasiDrive() {
|
||||
return <div>Ground</div>;
|
||||
}
|
||||
|
||||
export default GroundMarasiDrive;
|
||||
@@ -0,0 +1,5 @@
|
||||
function PodiumMarasiDrive() {
|
||||
return <div>Podium</div>;
|
||||
}
|
||||
|
||||
export default PodiumMarasiDrive;
|
||||
@@ -0,0 +1,5 @@
|
||||
function RooftopMarasiDrive() {
|
||||
return <div>Rooftop</div>;
|
||||
}
|
||||
|
||||
export default RooftopMarasiDrive;
|
||||
@@ -0,0 +1,26 @@
|
||||
import AmenitiesBadge from "../../icons/AmenitiesBadge";
|
||||
import Badge from "../../ui/Badge";
|
||||
|
||||
function SkyGardenMarasiDrive() {
|
||||
return (
|
||||
<div className="space-y-[1.667vw]">
|
||||
<div className="space-y-[0.556vw] border-b border-[#E2E2DC] pb-[1.667vw]">
|
||||
<p className="text-h4 font-medium">Sky Garden</p>
|
||||
<Badge variant="secondary" text="15 Amenties" />
|
||||
</div>
|
||||
<div className="flex items-center gap-[1.667vw]">
|
||||
<AmenitiesBadge count={3} type="Indoor" />
|
||||
<AmenitiesBadge count={12} type="Outdoor" />
|
||||
</div>
|
||||
<div className="bg-[#F3F3F2] rounded-[1.111vw] p-[1.111vw]">
|
||||
<img
|
||||
src="/images/floor-plans/marasi-drive/sky-garden.png"
|
||||
alt="sky-garden"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SkyGardenMarasiDrive;
|
||||
@@ -0,0 +1,17 @@
|
||||
interface AmenitiesBadgeProps {
|
||||
count: number;
|
||||
type: "Indoor" | "Outdoor";
|
||||
}
|
||||
|
||||
function AmenitiesBadge({ count, type }: AmenitiesBadgeProps) {
|
||||
return (
|
||||
<div className="flex items-center gap-[0.556vw]">
|
||||
<div className="bg-[#00BED7] rounded-full flex items-center justify-center w-[1.389vw] h-[1.389vw]">
|
||||
<p className="text-caption-m font-mono text-white">{count}</p>
|
||||
</div>
|
||||
<p className="text-caption-m opacity-70">{type} Amenities</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AmenitiesBadge;
|
||||
@@ -0,0 +1,23 @@
|
||||
import clsx from "clsx";
|
||||
|
||||
interface BadgeProps {
|
||||
variant: "primary" | "secondary";
|
||||
text: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function Badge({ variant, text, className }: BadgeProps) {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"rounded-[0.278vw] px-[0.556vw] py-[0.139vw] w-fit",
|
||||
variant === "primary" && "bg-[#00BED7] text-white",
|
||||
variant === "secondary" && "bg-[#F3F3F2] text-[#0D1922]/70",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<p className="text-caption-s">{text}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Badge;
|
||||
@@ -38,8 +38,8 @@ function Button({
|
||||
: "2xl:px-[0.972vw] 2xl:py-[0.694vw] 2xl:gap-[0.278vw] px-3 py-2.5 gap-1"),
|
||||
size === "small" &&
|
||||
(onlyIcon
|
||||
? "2xl:p-[0.694vw] p-2.5"
|
||||
: "2xl:px-[0.972vw] 2xl:py-[0.694vw] 2xl:gap-[0.278vw] 2xl:text-[0.833vw] px-3 py-2.5 gap-1 text-xs"),
|
||||
? "2xl:p-[0.556vw] p-2"
|
||||
: "2xl:px-[0.889vw] 2xl:py-[0.556vw] 2xl:gap-[0.278vw] 2xl:text-[0.833vw] px-3 py-2 gap-1 text-btn-s"),
|
||||
],
|
||||
variant === "link" && "text-sm text-black/50 w-fit",
|
||||
variant === "primary" &&
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export const rooms = [
|
||||
export const floorPlanMasksDubaiMarina = [
|
||||
{
|
||||
id: 1,
|
||||
path: "M40.81 288.95h-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-1H91.79c-.55 0-1-.45-1-1v-3.85c0-.55-.45-1-1-1H42.81c-.55 0-1 .45-1 1v1.61c0 .55-.45 1-1 1Z",
|
||||
@@ -0,0 +1,212 @@
|
||||
export const floorPlanMasksMarasiDrive = [
|
||||
{
|
||||
id: 1,
|
||||
path: "M40.81 288.95h-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-1H91.79c-.55 0-1-.45-1-1v-3.85c0-.55-.45-1-1-1H42.81c-.55 0-1 .45-1 1v1.61c0 .55-.45 1-1 1Z",
|
||||
text: {
|
||||
x: 85,
|
||||
y: 232,
|
||||
unitNumber: "1",
|
||||
unitType: "qwe",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
path: "M55.26 380.44H5.31c-.55 0-1-.45-1-1v-84.9c0-.55.45-1 1-1h106.12c.55 0 1 .45 1 1v7.76c0 .55.45 1 1 1h7.72c.55 0 1 .45 1 1v20.02c0 .55-.45 1-1 1h-15.92c-.55 0-1 .45-1 1v10.4c0 .55-.45 1-1 1h-8.72c-.55 0-1 .45-1 1v8.03c0 .55-.45 1-1 1H57.26c-.55 0-1 .45-1 1v30.68c0 .55-.45 1-1 1Z",
|
||||
text: {
|
||||
x: 56,
|
||||
y: 315,
|
||||
unitNumber: "2",
|
||||
unitType: "1 BR² — B",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
path: "M58.6 381.25v-21.73c0-.55.45-1 1-1h15.96c.55 0 1-.45 1-1v-6.04c0-.55.45-1 1-1h27.58c.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.4.9.9.9s.9.4.9.9v19.71c0 .27-.11.54-.31.72l-9.29 8.85a9 9 0 0 1-8.53 2.18l-52.8-14.11a1 1 0 0 0-.26-.03H60.46c-.55 0-1-.45-1-1v-16.29c0-.55.45-1 1-1h1.59c.55 0 1-.45 1-1v-47.34c0-.55-.45-1-1-1h-2.44c-.55 0-1-.45-1-1Z",
|
||||
text: {
|
||||
x: 107,
|
||||
y: 390,
|
||||
unitNumber: "####",
|
||||
unitType: "##########",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
path: "M161.1 338.37h-3.25c-.55 0-1 .45-1 1v92.26h-1.17c-.41 0-.74.33-.74.74v17.24c0 .55.45 1 1 1h6.3c.17 0 .34.04.49.13l24.9 13.9a8.01 8.01 0 0 0 9.56-1.33l13.06-12.4a1 1 0 0 0 .29-.71V339.37c0-.55-.45-1-1-1h-6.55c-.55 0-1-.45-1-1v-8.3c0-.55-.45-1-1-1h-37.88c-.55 0-1 .45-1 1v8.31c0 .55-.45 1-1 1Z",
|
||||
text: {
|
||||
x: 183,
|
||||
y: 390,
|
||||
unitNumber: "####",
|
||||
unitType: "##########",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
path: "M213.32 338.37h3.38c.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-9.38c-.55 0-1-.45-1-1V339.36c0-.55.45-1 1-1Z",
|
||||
text: {
|
||||
x: 239,
|
||||
y: 390,
|
||||
unitNumber: "####",
|
||||
unitType: "##########",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
path: "M268.37 381.25v-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",
|
||||
text: {
|
||||
x: 316,
|
||||
y: 390,
|
||||
unitNumber: "####",
|
||||
unitType: "##########",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
path: "M371.29 338.37h-3.25c-.55 0-1 .45-1 1v92.26h-1.17c-.41 0-.74.33-.74.74v17.24c0 .55.45 1 1 1h6.3c.17 0 .34.04.49.13l24.9 13.9a8.01 8.01 0 0 0 9.56-1.33l13.06-12.4a1 1 0 0 0 .29-.71V339.37c0-.55-.45-1-1-1h-6.55c-.55 0-1-.45-1-1v-8.3c0-.55-.45-1-1-1H373.3c-.55 0-1 .45-1 1v8.31c0 .55-.45 1-1 1Z",
|
||||
text: {
|
||||
x: 393,
|
||||
y: 390,
|
||||
unitNumber: "####",
|
||||
unitType: "##########",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
path: "M423.5 338.37h3.38c.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-9.38c-.55 0-1-.45-1-1V339.36c0-.55.45-1 1-1Z",
|
||||
text: {
|
||||
x: 451,
|
||||
y: 397,
|
||||
unitNumber: "####",
|
||||
unitType: "##########",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
path: "M483.58 337.26v-9.76h42.64v22.41h30V358h17.46v24.14h-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.4Z",
|
||||
text: {
|
||||
x: 500,
|
||||
y: 390,
|
||||
unitNumber: "####",
|
||||
unitType: "##########",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
path: "M576.92 380.43h51.77c.55 0 1-.45 1-1v-85c0-.55-.45-1-1-1H520.87c-.55 0-1 .45-1 1v7.87c0 .55-.45 1-1 1h-7.41c-.55 0-1 .45-1 1v20.02c0 .55.45 1 1 1h15.92c.55 0 1 .45 1 1v10.5c0 .55.45 1 1 1h8.72c.55 0 1 .45 1 1v7.94c0 .55.45 1 1 1h34.82c.55 0 1 .45 1 1v30.68c0 .55.45 1 1 1Z",
|
||||
text: {
|
||||
x: 570,
|
||||
y: 316,
|
||||
unitNumber: "####",
|
||||
unitType: "##########",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
path: "M495.64 241.6h-17.41v45.48h7.19v10.13h22.29v-4.45h12.26v-1.33h22.81v-6.06h47.75v4.76h18.55v-9.82h8.52v-46.33H495.63v7.62Z",
|
||||
text: {
|
||||
x: 495,
|
||||
y: 260,
|
||||
unitNumber: "####",
|
||||
unitType: "##########",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
path: "M495.64 223.94h-17.41v-44.9h7.19v-10.13h22.29v4.45h12.26v1.33h22.81v6.06h47.75v-4.76h18.55v9.82h8.52v45.75H495.63v-7.62Z",
|
||||
text: {
|
||||
x: 495,
|
||||
y: 200,
|
||||
unitNumber: "####",
|
||||
unitType: "##########",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
path: "M576.92 85.4h51.77c.55 0 1 .45 1 1v84.99c0 .55-.45 1-1 1h-107.5c-.55 0-1-.45-1-1v-7.86c0-.55-.45-1-1-1h-7.73c-.55 0-1-.45-1-1v-20.02c0-.55.45-1 1-1h15.92c.55 0 1-.45 1-1l-.04-10.95c0-.55.45-1 1-1h8.37c.55 0 1-.44 1-1l.04-7.86c0-.55.45-.99 1-.99h35.18c.55 0 1-.45 1-1V86.4c0-.55.45-1 1-1Z",
|
||||
text: {
|
||||
x: 555,
|
||||
y: 85,
|
||||
unitNumber: "709",
|
||||
unitType: "1 BR",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
path: "M483.58 128.54v9.76h42.64v-22.41h30v-8.08h17.46V83.67h-4.02V34.74h4.12V16.15L562.04 3.54a8.01 8.01 0 0 0-7.98-2.26l-53.9 14.87h-19.7v18.59h1.67v49h-3.95v44.79h5.4Z",
|
||||
text: {
|
||||
x: 500,
|
||||
y: 85,
|
||||
unitNumber: "708",
|
||||
unitType: "1 BR",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
path: "M423.5 128.98h3.38c.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-1V35.73h1.8V17s.11-3.35 0-3.46l-10.27-9.5a8.01 8.01 0 0 0-9.56-1.33l-24.9 13.9c-.15.08-.32.13-.49.13h-9.38c-.55 0-1 .45-1 1v110.24c0 .55.45 1 1 1Z",
|
||||
text: {
|
||||
x: 445,
|
||||
y: 85,
|
||||
unitNumber: "707",
|
||||
unitType: "1 BR",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
path: "M371.29 128.98h-3.25c-.55 0-1-.45-1-1V35.73h-1.17c-.41 0-.74-.33-.74-.74V17.75c0-.55.45-1 1-1h6.3c.17 0 .34-.04.49-.13l24.9-13.9a8.01 8.01 0 0 1 9.56 1.33l13.06 12.4c.19.19.29.44.29.71v110.83c0 .55-.45 1-1 1h-6.55c-.55 0-1 .45-1 1v8.3c0 .55-.45 1-1 1H373.3c-.55 0-1-.45-1-1v-8.31c0-.55-.45-1-1-1Z",
|
||||
text: {
|
||||
x: 390,
|
||||
y: 85,
|
||||
unitNumber: "706",
|
||||
unitType: "1 BR",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
path: "M268.37 85.09v21.73c0 .55.45 1 1 1h15.52c.55 0 1 .45 1 1v6.04c0 .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-1V85.08c0-.55-.45-1-1-1h-2.44c-.55 0-1-.45-1-1V35.59c0-.5-.04-.9.46-.9s.9-.4.9-.9V14.08c0-.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 1V83.1c0 .55-.45 1-1 1h-2.44c-.55 0-1 .45-1 1Z",
|
||||
text: {
|
||||
x: 290,
|
||||
y: 85,
|
||||
unitNumber: "705",
|
||||
unitType: "1 BR",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
path: "M213.32 128.98h3.38c.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-1V35.73h1.8V17s.11-3.35 0-3.46l-10.27-9.5a8.01 8.01 0 0 0-9.56-1.33l-24.9 13.9c-.15.08-.32.13-.49.13h-9.38c-.55 0-1 .45-1 1v110.24c0 .55.45 1 1 1Z",
|
||||
text: {
|
||||
x: 235,
|
||||
y: 85,
|
||||
unitNumber: "704",
|
||||
unitType: "1 BR",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
path: "M161.1 128.98h-3.25c-.55 0-1-.45-1-1V35.73h-1.17c-.41 0-.74-.33-.74-.74V17.75c0-.55.45-1 1-1h6.3c.17 0 .34-.04.49-.13l24.9-13.9a8.01 8.01 0 0 1 9.56 1.33l13.06 12.4c.19.19.29.44.29.71v110.83c0 .55-.45 1-1 1h-6.55c-.55 0-1 .45-1 1v8.3c0 .55-.45 1-1 1h-37.88c-.55 0-1-.45-1-1v-8.31c0-.55-.45-1-1-1Z",
|
||||
text: {
|
||||
x: 180,
|
||||
y: 85,
|
||||
unitNumber: "703",
|
||||
unitType: "1 BR",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
path: "M58.6 85.09v21.73c0 .55.45 1 1 1h15.96c.55 0 1 .45 1 1v6.04c0 .55.45 1 1 1h27.58c.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-1V85.08c0-.55-.45-1-1-1h-2.44c-.55 0-1-.45-1-1V35.59c0-.5.4-.9.9-.9s.9-.4.9-.9V14.08c0-.27-.11-.54-.31-.72l-9.29-8.85a9 9 0 0 0-8.53-2.18l-52.8 14.11c-.08.02-.17.03-.26.03H60.46c-.55 0-1 .45-1 1v16.29c0 .55.45 1 1 1h1.59c.55 0 1 .45 1 1V83.1c0 .55-.45 1-1 1h-2.44c-.55 0-1 .45-1 1Z",
|
||||
text: {
|
||||
x: 85,
|
||||
y: 85,
|
||||
unitNumber: "702",
|
||||
unitType: "1 BR",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
path: "M55.26 85.4H5.31c-.55 0-1 .45-1 1v84.99c0 .55.45 1 1 1h106.12c.55 0 1-.45 1-1v-7.86c0-.55.45-1 1-1h7.72c.55 0 1-.45 1-1v-20.02c0-.55-.45-1-1-1h-15.92c-.55 0-1-.45-1-1v-10.77c0-.55-.45-1-1-1h-8.72c-.55 0-1-.45-1-1v-8.03c0-.55-.45-1-1-1H57.26c-.55 0-1-.45-1-1V86.4c0-.55-.45-1-1-1",
|
||||
text: {
|
||||
x: 85,
|
||||
y: 85,
|
||||
unitNumber: "701",
|
||||
unitType: "1 BR² — B",
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -7,6 +7,12 @@ 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 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";
|
||||
import SkyGardenMarasiDrive from "../components/floor-plans/marasi-drive/SkyGardenMarasiDrive";
|
||||
import Badge from "../components/ui/Badge";
|
||||
|
||||
function FloorsPage() {
|
||||
const { complexName } = useParams();
|
||||
@@ -45,12 +51,14 @@ function FloorsPage() {
|
||||
<div className="space-y-[0.556vw] border-b border-[#E2E2DC] pb-[1.667vw]">
|
||||
<p className="text-h4 font-medium">{selectedFloor} floor</p>
|
||||
<div className="flex items-center gap-[0.278vw]">
|
||||
<div className="px-[0.556vw] py-[0.139vw] bg-[#F3F3F2] rounded-[0.278vw]">
|
||||
{/* <div className="px-[0.556vw] py-[0.139vw] bg-[#F3F3F2] rounded-[0.278vw]">
|
||||
<p className="text-caption-s opacity-70">16 Apartments</p>
|
||||
</div>
|
||||
<div className="px-[0.556vw] py-[0.139vw] bg-[#00BED7] rounded-[0.278vw]">
|
||||
<p className="text-caption-s text-white">Combinable</p>
|
||||
</div>
|
||||
</div> */}
|
||||
<Badge variant="secondary" text="16 Apartments" />
|
||||
<Badge variant="primary" text="Combinable" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -78,6 +86,24 @@ function FloorsPage() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{complexName === "marasi-drive" && (
|
||||
<>
|
||||
{selectedFloor === "Rooftop" && <RooftopMarasiDrive />}
|
||||
{selectedFloor === "Ground Level" && <GroundMarasiDrive />}
|
||||
{selectedFloor === "Podium Level" && <PodiumMarasiDrive />}
|
||||
{selectedFloor === "Sky Garden" && <SkyGardenMarasiDrive />}
|
||||
{!!parseInt(selectedFloor!) && (
|
||||
<div className="space-y-[1.111vw]">
|
||||
<div className="space-y-[0.556vw] border-b border-[#E2E2DC] pb-[1.667vw]">
|
||||
<p className="text-h4 font-medium">{selectedFloor} floor</p>
|
||||
</div>
|
||||
<div className="p-[1.111vw] bg-[#F3F3F2] rounded-[0.833vw]">
|
||||
<FloorPlanMarasiDrive selectedFloor={selectedFloor} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</FloorSidebar>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user