upd
This commit is contained in:
@@ -58,7 +58,7 @@ const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[#00BED7] font-semibold text-subheadline-s leading-7">
|
||||
Unavailable
|
||||
{/* Unavailable */}
|
||||
{/* AED {formatNumber(1668888, ",", 3, 1)} */}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -4,8 +4,8 @@ function FloorPath(props: SVGProps<SVGPathElement> & { selected: boolean }) {
|
||||
return (
|
||||
<path
|
||||
{...props}
|
||||
className={` hover:fill-[#00bed7]/80 transition-[fill] cursor-pointer max-sm:pointer-events-none ${
|
||||
props.selected ? "fill-[#00bed7]/80" : "fill-[#00bed7]/40"
|
||||
className={` hover:fill-[#00bed7]/70 transition-[fill] cursor-pointer max-sm:pointer-events-none ${
|
||||
props.selected ? "fill-[#00bed7]/70" : "fill-[#00bed7]/20"
|
||||
}`}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -7,20 +7,20 @@ function SelectWingMobile({ onClick }: Props) {
|
||||
<>
|
||||
{/* <path
|
||||
d="M1663.06,2753.99l-195.69-71.53c-2.61-.95-5.37.98-5.37,3.76v85.81c0,1.51-.86,2.9-2.21,3.58l-.58.28c-1.35.68-2.21,2.07-2.21,3.58v1.47c0,.68.27,1.33.75,1.81s.75,1.13.75,1.81v49.84c0,1.58.93,3.01,2.38,3.65l143.04,63.47c.71.31,1.48.42,2.24.3l786.46-122.79c1.94-.31,3.38-1.98,3.38-3.95v-15.56c0-1.16.86-2.13,2-2.27s2-1.11,2-2.27v-2.36c0-.37-.23-.71-.58-.84-.88-.33-.73-1.62.2-1.73l16.88-2.11c2-.25,3.5-1.95,3.5-3.97v-56.06c0-2.41-2.13-4.28-4.52-3.96l-631,83.39c-32.48,4.66-77.48,2.66-121.42-13.35Z"
|
||||
className="fill-[#00bed7]/40"
|
||||
className="fill-[#00bed7]/20"
|
||||
/>
|
||||
<path
|
||||
d="M1587.83,2640.32v43.12c0,1.72,1.1,3.25,2.74,3.8l85.47,28.43c33.98,11.3,70.04,14.85,105.57,10.41l509.72-63.82c2-.25,3.5-1.95,3.5-3.96v-35.08c0-1.48-.81-2.83-2.11-3.53l-20.56-11.04c-7.19-3.87-14.83-6.84-22.75-8.85l-197.74-50.14c-23.14-5.87-46.91-8.83-70.79-8.83h-17.05l-31.71,2.28c-20.47,1.47-40.72,5.13-60.41,10.91l-281.01,82.46c-1.7.5-2.87,2.07-2.87,3.84Z"
|
||||
className="fill-[#00bed7]/40"
|
||||
className="fill-[#00bed7]/20"
|
||||
/> */}
|
||||
<path
|
||||
d="M2446,1489.72v25.79l-.29,1041.64v33.08l-15.21,2.27v89l-134,18v-36.5l-3.5-3-48,7.5c-64.83-22.5-200.49-68.6-218.43-73-17.94-4.4-49.72-3.5-63.37-2.5v-64.53l.29-1015.83v-111.64c22.83-.17,74.11-1.6,96.51-6v-7.5l73.5-9,24,3.5,91.5-10.5,151,19v63l46,3v34.22Z"
|
||||
className="fill-[#00bed7]/40"
|
||||
className="fill-[#00bed7]/20"
|
||||
onClick={() => onClick("west")}
|
||||
/>
|
||||
<path
|
||||
d="M1441.29,1493.16v23.81l-.29,1034.35h0v40.68l30,8v36.5l-15,4.5,120.5,42,12-5.5,15.5,5.5v7l22,8.5,284.5-95c11.63-3.83,38.46-11.5,52.7-11.5v-64.53l.29-1015.83v-111.64c-12.5.33-50.29-.9-101.49-8.5v-5.5l-69-10-17,3-124-19-24,3.5-58-9.5-50,8v18.5l-16,2.5v66.5l-62.71,10v33.66Z"
|
||||
className="fill-[#00bed7]/40"
|
||||
className="fill-[#00bed7]/20"
|
||||
onClick={() => onClick("east")}
|
||||
/>
|
||||
</>
|
||||
|
||||
@@ -20,16 +20,16 @@ const SimilarAppartmentCard = ({ layoutCard, elementRef }: LayoutCardProps) => {
|
||||
return (
|
||||
<div
|
||||
ref={elementRef}
|
||||
className="bg-white flex flex-col p-4 rounded-2xl gap-4 cursor-pointer select-none touch-none"
|
||||
className="flex flex-col gap-4 p-4 bg-white cursor-pointer select-none rounded-2xl touch-none"
|
||||
onClick={handleOnClick}
|
||||
>
|
||||
<div className="flex gap-4 justify-between">
|
||||
<div className="flex gap-1 flex-col">
|
||||
<div className="flex justify-between gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-[#00BED7] text-s leading-5">{Project_Name}</p>
|
||||
<div className="text-[#73787C] flex gap-2 items-center w-fit">
|
||||
<p className="text-caption-m font-semibold leading-4">{wing}</p>
|
||||
<p className="font-semibold leading-4 text-caption-m">{wing}</p>
|
||||
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
||||
<p className="text-caption-m font-semibold leading-4">
|
||||
<p className="font-semibold leading-4 text-caption-m">
|
||||
Floor {Floor}
|
||||
</p>
|
||||
</div>
|
||||
@@ -38,7 +38,7 @@ const SimilarAppartmentCard = ({ layoutCard, elementRef }: LayoutCardProps) => {
|
||||
{Total_Area_Sqft} units
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full aspect-square rounded-lg">
|
||||
<div className="w-full rounded-lg aspect-square">
|
||||
<img src="/images/layout-1.png" alt="" className="h-full" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
@@ -47,7 +47,7 @@ const SimilarAppartmentCard = ({ layoutCard, elementRef }: LayoutCardProps) => {
|
||||
</p>
|
||||
<p className="text-[#00BED7] text-m font-bold">
|
||||
{/* AED {formatNumber(cost, ",", 3, 1)} */}
|
||||
Unavailable
|
||||
{/* Unavailable */}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,7 +22,8 @@ const apartmentDescriptions: IApartmentDesc[] = [
|
||||
"Every inch is designed to provide more space for comfort and convenience. This feature increase your unit size by 33%",
|
||||
id: "1",
|
||||
totalArea: "Up to 365.54 Sqft",
|
||||
cost: "Unavailable",
|
||||
// cost: "Unavailable",
|
||||
cost: "",
|
||||
apartmentType: "Studio Flex",
|
||||
},
|
||||
{
|
||||
@@ -33,7 +34,8 @@ const apartmentDescriptions: IApartmentDesc[] = [
|
||||
"When folded, it unveils a spacious living room creating a cohesive space that blends both style and functionality.",
|
||||
id: "2",
|
||||
totalArea: "Up to 416.13 Sqft",
|
||||
cost: "Unavailable",
|
||||
// cost: "Unavailable",
|
||||
cost: "",
|
||||
apartmentType: "Studio Squared",
|
||||
},
|
||||
{
|
||||
@@ -44,7 +46,8 @@ const apartmentDescriptions: IApartmentDesc[] = [
|
||||
"With pocket walls that disappear and a Flexibed that seamlessly converts, you can transform your living room into an extra bedroom, anytime you want!",
|
||||
id: "3",
|
||||
totalArea: "Up to 770.05 Sqft",
|
||||
cost: "Unavailable",
|
||||
// cost: "Unavailable",
|
||||
cost: "",
|
||||
apartmentType: "1 BR Squared",
|
||||
},
|
||||
{
|
||||
@@ -55,7 +58,8 @@ const apartmentDescriptions: IApartmentDesc[] = [
|
||||
"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.",
|
||||
id: "4",
|
||||
totalArea: "Up to 1057.55 Sqft",
|
||||
cost: "Unavailable",
|
||||
// cost: "Unavailable",
|
||||
cost: "",
|
||||
apartmentType: "2 BR Squared",
|
||||
},
|
||||
];
|
||||
@@ -71,8 +75,8 @@ const StudioDescriptionSection = ({
|
||||
(aprt) => aprt.apartmentType === apartment.Unit_Type
|
||||
);
|
||||
return (
|
||||
<section className="grid grid-cols-12 lg:gap-4 gap-3">
|
||||
<div className="bg-white rounded-2xl lg:col-span-3 col-span-6 flex flex-col justify-between p-8">
|
||||
<section className="grid grid-cols-12 gap-3 lg:gap-4">
|
||||
<div className="flex flex-col justify-between col-span-6 p-8 bg-white rounded-2xl lg:col-span-3">
|
||||
<div className="flex flex-col">
|
||||
<h2 className="text-[#0D1922] text-subheadline-l font-semibold">
|
||||
{apartmentDesc?.title}
|
||||
@@ -101,11 +105,11 @@ const StudioDescriptionSection = ({
|
||||
</p> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:col-span-9 rounded-2xl overflow-clip col-span-6">
|
||||
<div className="col-span-6 lg:col-span-9 rounded-2xl overflow-clip">
|
||||
<img
|
||||
src="/images/searchApartment/StudioFlex.png"
|
||||
alt=""
|
||||
className="w-full object-cover h-full"
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -8,11 +8,7 @@ interface FloorDescriptionProps {
|
||||
isLeft: boolean;
|
||||
}
|
||||
|
||||
const FloorDescription = ({
|
||||
descriptionFloor,
|
||||
floorApartments,
|
||||
isLeft,
|
||||
}: FloorDescriptionProps) => {
|
||||
const FloorDescription = ({ descriptionFloor, floorApartments, isLeft }: FloorDescriptionProps) => {
|
||||
const { isSidebar } = useWingSidebar();
|
||||
return (
|
||||
<>
|
||||
@@ -22,16 +18,12 @@ const FloorDescription = ({
|
||||
}`}
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="flex justify-between border-b pb-4">
|
||||
<div className="flex justify-between pb-4 border-b">
|
||||
<div className="flex flex-col">
|
||||
<p
|
||||
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out`}
|
||||
>
|
||||
<p className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out`}>
|
||||
{descriptionFloor?.floor} Floor
|
||||
</p>
|
||||
<p className="text-[#73787C] font-semibold text-caption-m">
|
||||
{descriptionFloor?.wing}
|
||||
</p>
|
||||
<p className="text-[#73787C] font-semibold text-caption-m">{descriptionFloor?.wing}</p>
|
||||
</div>
|
||||
{floorApartments.length > 0 && (
|
||||
<div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white justify-start self-start">
|
||||
@@ -40,84 +32,59 @@ const FloorDescription = ({
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 pt-4">
|
||||
{floorApartments.filter((apart) => apart.unitType === "Studio Flex")
|
||||
.length > 0 && (
|
||||
{floorApartments.filter((apart) => apart.unitType === "Studio Flex").length > 0 && (
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="p-1 flex justify-center items-center">
|
||||
{
|
||||
floorApartments.filter(
|
||||
(apart) => apart.unitType === "Studio Flex"
|
||||
).length
|
||||
}
|
||||
<p className="flex items-center justify-center p-1">
|
||||
{floorApartments.filter((apart) => apart.unitType === "Studio Flex").length}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C] w-full">Studio Flex</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">{/* Unavailable */}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{floorApartments.filter(
|
||||
(apart) => apart.unitType === "Studio Squared"
|
||||
).length > 0 && (
|
||||
{floorApartments.filter((apart) => apart.unitType === "Studio Squared").length > 0 && (
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="h-full w-full flex justify-center items-center">
|
||||
{
|
||||
floorApartments.filter(
|
||||
(apart) => apart.unitType === "Studio Squared"
|
||||
).length
|
||||
}
|
||||
<p className="flex items-center justify-center w-full h-full">
|
||||
{floorApartments.filter((apart) => apart.unitType === "Studio Squared").length}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C]">Studio²</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">{/* Unavailable */}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{floorApartments.filter(
|
||||
(apart) => apart.unitType === "1 BR Squared"
|
||||
).length > 0 && (
|
||||
{floorApartments.filter((apart) => apart.unitType === "1 BR Squared").length > 0 && (
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="h-full w-full flex justify-center items-center">
|
||||
{
|
||||
floorApartments.filter(
|
||||
(apart) => apart.unitType === "1 BR Squared"
|
||||
).length
|
||||
}
|
||||
<p className="flex items-center justify-center w-full h-full">
|
||||
{floorApartments.filter((apart) => apart.unitType === "1 BR Squared").length}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C]">1 Bedroom²</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">{/* Unavailable */}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{floorApartments.filter(
|
||||
(apart) => apart.unitType === "2 BR Squared"
|
||||
).length > 0 && (
|
||||
{floorApartments.filter((apart) => apart.unitType === "2 BR Squared").length > 0 && (
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="h-full w-full flex justify-center items-center">
|
||||
{
|
||||
floorApartments.filter(
|
||||
(apart) => apart.unitType === "2 BR Squared"
|
||||
).length
|
||||
}
|
||||
<p className="flex items-center justify-center w-full h-full">
|
||||
{floorApartments.filter((apart) => apart.unitType === "2 BR Squared").length}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C] text-nowrap">
|
||||
2 Bedroom²
|
||||
</p>
|
||||
<p className="text-s text-[#73787C] text-nowrap">2 Bedroom²</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">{/* Unavailable */}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -42,16 +42,16 @@ const ApartmentDescription = ({
|
||||
Number(hoveredApartment?.Total_Area_Sqft).toFixed(2)}{" "}
|
||||
Sqft
|
||||
</h2>
|
||||
<div className="flex gap-2 items-center text-caption-m font-semibold pt-1 border-b pb-4 justify-start">
|
||||
<div className="flex items-center justify-start gap-2 pt-1 pb-4 font-semibold border-b text-caption-m">
|
||||
<p className="text-[#0D1922B2]">{wing}</p>
|
||||
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
||||
<p className="text-[#0D1922B2]">Floor {hoveredApartment.Floor}</p>
|
||||
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
||||
<p className="text-[#0D1922B2]">{hoveredApartment.Unit_No}</p>
|
||||
</div>
|
||||
<div className="flex justify-between items-center pt-4 gap-14">
|
||||
<div className="flex items-center justify-between pt-4 gap-14">
|
||||
<p className="font-semibold text-[#00BED7] text-subheadline-s">
|
||||
Unavailable
|
||||
{/* Unavailable */}
|
||||
</p>
|
||||
{/* <p className="font-semibold text-[#00BED7] text-subheadline-s">
|
||||
AED 1,668,888
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,7 +1,6 @@
|
||||
import IUnit from "../../../types/IUnit";
|
||||
import VirtualTourIcon from "../../icons/VirtualTourIcon";
|
||||
import unitTypes from "../../../data/unitTypes.json";
|
||||
import { useEffect } from "react";
|
||||
|
||||
interface Props {
|
||||
unit: IUnit | undefined;
|
||||
@@ -11,10 +10,6 @@ interface Props {
|
||||
}
|
||||
|
||||
function UnitPopup({ unit, type, show, mousePos }: Props) {
|
||||
useEffect(() => {
|
||||
console.log(unit, type, show, mousePos);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`absolute w-[344px] h-[156px] z-30 p-6 space-y-4 bg-white rounded-2xl shadow-lg pointer-events-none transition-opacity -translate-x-[calc(100%+16px)] -translate-y-[100%] ${
|
||||
@@ -48,7 +43,8 @@ function UnitPopup({ unit, type, show, mousePos }: Props) {
|
||||
.replaceAll(",", " ")}
|
||||
</>
|
||||
) : (
|
||||
"Unavailable"
|
||||
// "Unavailable"
|
||||
""
|
||||
)}
|
||||
</p>
|
||||
{unitTypes.some((unitType) => unitType.type === type && unitType.tourAvailable) && (
|
||||
|
||||
@@ -1207,7 +1207,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={17}
|
||||
data-type="2br-type-b"
|
||||
d="M169.41,2.98l33.1,33.11.67,1,32.88,32.88-14.03,14.03,3.29,3.29-43.59,43.59-3.84-3.84-2.69,2.69-10.9-10.9-9.67,9.67-46.6-46.6,2.99-2.99-13.72-13.72,20.87-20.87.65-.66L159.51,2.98c2.73-2.73,7.17-2.73,9.9,0Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1232,7 +1232,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={16}
|
||||
data-type="1br-type-c"
|
||||
d="M200.89,155.43l-1.67-1.67-7.02-7.15-8.01-8.01,2.63-2.63-3.88-3.89,43.59-43.59,3.26,3.26,14.06-14.06,33.69,33.69-14.06,14.06,2.22,2.23-25.32,25.32.97.97-15.69,15.69-19.49-19.49-5.28,5.28Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1257,7 +1257,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={15}
|
||||
data-type="1br-type-c"
|
||||
d="M264.5,213.65l43.59-43.59-3.15-3.15,14.06-14.06-33.83-33.83-14.06,14.06-2.31-2.31-25.32,25.32-.88-.88-15.69,15.69,19.63,19.63-5.28,5.28,1.61,1.61,7.13,7.13,7.89,7.88,2.7-2.69,3.91,3.91Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1282,7 +1282,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={14}
|
||||
data-type="studio-flex"
|
||||
d="M327.42,281.91l1.18,1.17,6.96,7.01,8.35,8.35,4.17-4.17,2.83,2.84,39.15-39.15,13.53-13.53-19.01-19.01-13.53,13.53-3.16-3.16-40.62,40.62,2.82,2.82-2.68,2.68Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1307,7 +1307,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={13}
|
||||
data-type="studio-flex"
|
||||
d="M424.28,265.11l-13.53,13.53,3.16,3.16-40.6,40.6-2.85-2.85-2.72,2.72-1.26-1.26-7.16-7.16-8.52-8.52,4.17-4.17-2.77-2.77,39.15-39.15,13.53-13.53,19.39,19.39Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1332,7 +1332,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={12}
|
||||
data-type="studio-flex"
|
||||
d="M452.09,292.93l-13.58,13.47-.72-.72-25.23,25.23.83.83-13.92,13.92-2.85-2.85-4.17,4.17-9.42-9.42-7.11-7.11-1.24-1.23,2.72-2.72-2.91-2.91,40.6-40.6,3.13,3.13,13.53-13.53,20.34,20.34Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1357,7 +1357,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={11}
|
||||
data-type="studio-flex"
|
||||
d="M473.6,314.43l-13.53,13.53,3.19,3.19-40.6,40.6-2.83-2.83-2.72,2.72-1.45-1.45-6.87-6.87-9.47-9.46,4.17-4.17-2.82-2.82,13.92-13.92.98.98,25.23-25.23-1-1,13.53-13.53,20.27,20.27Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1382,7 +1382,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={10}
|
||||
data-type="studio-flex"
|
||||
d="M500.52,341.36l-13.53,13.53-39.15,39.15-3.07-3.07-4.17,4.17-8.29-8.29-7.13-7.13-1.27-1.27,2.72-2.72-2.71-2.71,40.6-40.6,3.22,3.22,13.44-13.61,19.34,19.34Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1407,7 +1407,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={9}
|
||||
data-type="studio-flex"
|
||||
d="M470.14,419.23l40.6-40.6-3.18-3.18,13.53-13.53-19.47-19.47-13.61,13.44-39.15,39.15,3.04,3.04-4.17,4.17,8.43,8.43,7.07,7.07,1.35,1.35,2.72-2.72,2.84,2.84Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1432,7 +1432,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={8}
|
||||
data-type="1br-type-a"
|
||||
d="M500.78,455.79l16.51-5.61,1.39,4.2,35.35-11.92,7.77,22.96,1.28-.38,1.24,3.65,3.61-1.22c1.76-.59,3.67.35,4.28,2.11l9.99,28.94c.65,1.89-.47,3.94-2.42,4.4l-54.82,12.98c-1.69.4-3.42-.55-3.98-2.19l-2.17-6.31-9.95,3.41-11.22-33.56-1.47.43-6.36-17.98,1.8-.63,9.17-3.26Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1457,7 +1457,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={7}
|
||||
data-type="1br-type-a"
|
||||
d="M486.5,460.74l1.79-.56,6.3,17.99-1.27.39,11.45,33.8-10.01,3.49c0,.15.92,2.97,2.01,6.22.55,1.63-.21,3.42-1.77,4.16l-50.88,24.06c-1.82.86-3.98-.04-4.64-1.94l-10.31-29.31c-.62-1.78.32-3.72,2.1-4.33l3.91-1.33-1.26-3.6,1.29-.44-8.1-23.26,35.14-12.1-1.4-4.43,16.15-5.52,9.52-3.29Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1482,7 +1482,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={6}
|
||||
data-type="1br-type-d"
|
||||
d="M430.61,412.89l-1.57-1.56-7.08-7.08-9.33-9.33-2.56,2.56-3.86-3.86-42.07,42.07,7.64,7.64-15.69,15.69,30.49,30.49,15.69-15.69,6.63,6.63,24.46-24.46-3.18-3.18,9.93-9.93-19.74-19.74,10.23-10.23Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1507,7 +1507,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={5}
|
||||
data-type="studio-2"
|
||||
d="M404.68,386.96l-1.16-1.16-7.09-7.09-8.35-8.35-4.15,4.15-5.41-5.42-10.33,10.33.99.99-31.72,31.72-.99-.99-14.13,14.13,21.71,21.71,14.13-14.13,3.23,3.23,43.64-43.64-2.93-2.93,2.56-2.56Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1532,7 +1532,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={4}
|
||||
data-type="studio-2"
|
||||
d="M376.01,358.29l-8.41-8.41-7.05-7.05-1.36-1.36-2.56,2.56-2.75-2.75-43.64,43.64,3.14,3.14-14.13,14.13,21.82,21.82,14.13-14.13-.87-.87,31.72-31.72.85.85,10.33-10.33-5.37-5.37,4.15-4.15Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1557,7 +1557,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={3}
|
||||
data-type="1br-type-d"
|
||||
d="M351.18,333.52l-9.25-9.25-7.07-7.07-1.77-1.77-10.17,10.17-19.33-19.33-9.92,9.92-3.17-3.17-24.45,24.45,6.83,6.83-15.75,15.75,30.05,30.05,15.75-15.75,7.58,7.59,42.01-42.01-3.87-3.87,2.53-2.53Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1582,7 +1582,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={2}
|
||||
data-type="studio-2"
|
||||
d="M304.47,286.8l-1.14-1.14-7.04-7.04-8.46-8.46-4.12,4.12-4.36-4.36-42.07,42.07-14.11,14.11,20.7,20.7,14.11-14.11,3.22,3.22,31.77-31.77.92.92,11.88-11.88-3.83-3.83,2.53-2.53Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1607,7 +1607,7 @@ function WestWingFloorPlanLower({
|
||||
data-number={1}
|
||||
data-type="2br-type-a"
|
||||
d="M264.39,246.73l1.02,1.02-4.12,4.12,14.85,14.85-1.91,1.91,1.9,1.9-36.21,36.21-18.05,18.05-1.97-1.97c-6.35-6.35-14.97-9.92-23.95-9.92h-19.67l.03-17.38-10.88-.03v-46.12h8.58v-6.29h77.87l4.43-4.43.95.94,7.13,7.13Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
|
||||
@@ -1185,7 +1185,7 @@ function WestWingFloorPlanUpper({
|
||||
data-number={15}
|
||||
data-type="2br-type-b"
|
||||
d="M222.75,83.92l13.84-13.84-33.29-33.29c-.12-.18-.39-.56-.45-.61L169.58,2.91c-2.73-2.73-7.17-2.73-9.9,0l-40.71,40.71-.69.69-21.08,21.09,13.65,13.65.21.21-2.89,2.89,46.6,46.6,9.79-9.79,11.02,11.02,2.57-2.57,3.84,3.84,43.69-43.69-3.28-3.28.35-.35Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1210,7 +1210,7 @@ function WestWingFloorPlanUpper({
|
||||
data-number={14}
|
||||
data-type="1br-type-c"
|
||||
d="M240.46,153.11l25.4-25.4-2.22-2.22,14.18-14.17-33.59-33.59-14.17,14.17-3.25-3.25-43.69,43.69,3.89,3.89-2.57,2.58,8.06,8.06,7.1,7.1,1.5,1.5,5.17-5.17,19.54,19.54,15.69-15.69-1.03-1.03Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1235,7 +1235,7 @@ function WestWingFloorPlanUpper({
|
||||
data-number={13}
|
||||
data-type="1br-type-c"
|
||||
d="M260.81,210.14l3.89,3.89,43.73-43.73-3.36-3.36,14.18-14.18-33.66-33.66-14.18,14.18-2.24-2.24-25.4,25.4-.98-.98-15.69,15.69,19.65,19.66-5.17,5.17,1.53,1.54,7.24,7.24,7.91,7.91,2.54-2.54Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1260,7 +1260,7 @@ function WestWingFloorPlanUpper({
|
||||
data-number={12}
|
||||
data-type="1br-type-d"
|
||||
d="M365.82,320.22l-9.26-9.26-7.07-7.07-1.72-1.72,10.25-10.25-19.53-19.53,10.08-10.08-3.13-3.13,24.46-24.46,3.16,3.16,12.16-12.16,38.3,38.3-12.16,12.16,3.13,3.13-42.25,42.25-3.88-3.88-2.54,2.54Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1285,7 +1285,7 @@ function WestWingFloorPlanUpper({
|
||||
data-number={11}
|
||||
data-type="studio-2"
|
||||
d="M376.48,325.78l-3.03-3.03,43.79-43.8,3.3,3.3,14.1-14.1,22.12,22.12-14.1,14.1-2.69,2.7-1.14-1.14-25.55,25.55,1.12,1.12-13.88,13.88-5.58-5.58-4.21,4.21-8.75-8.75-6.72-6.72-1.33-1.33,2.54-2.54Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1310,7 +1310,7 @@ function WestWingFloorPlanUpper({
|
||||
data-number={10}
|
||||
data-type="studio-2"
|
||||
d="M419.72,374.11l-1.39-1.39-6.73-6.73-8.63-8.63,4.21-4.21-5.51-5.51,13.88-13.88,1.02,1.02,25.55-25.55-1.01-1.01,2.69-2.69,14.1-14.1,21.79,21.79-14.1,14.1,3.14,3.14-43.76,43.76-2.67-2.67-2.57,2.57Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1335,7 +1335,7 @@ function WestWingFloorPlanUpper({
|
||||
data-number={9}
|
||||
data-type="1br-type-d"
|
||||
d="M511.97,378.73l.92-.92-2.98-2.98,12.22-12.22-38.3-38.3-12.22,12.22-3.19-3.19-42.16,42.16,3.9,3.9-2.57,2.57,9.43,9.43,6.9,6.9h0s1.69,1.68,1.69,1.68l10.29-10.29,19.42,19.42,10.09-10.09,3.13,3.13,23.43-23.43Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1360,7 +1360,7 @@ function WestWingFloorPlanUpper({
|
||||
data-number={8}
|
||||
data-type="1br-type-a"
|
||||
d="M518.29,451l-27.67,9.51,6.34,17.89,1.46-.42,11.67,34.18,10.32-3.68,1.85,6.1c.52,1.71,2.28,2.73,4.02,2.32l55.19-12.9c1.96-.46,3.09-2.51,2.43-4.42l-10.11-29.13c-.6-1.74-2.49-2.68-4.24-2.12l-4.15,1.33-1.33-3.56-1.14.43-8.12-23.31-35.19,12.02-1.32-4.26Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1385,7 +1385,7 @@ function WestWingFloorPlanUpper({
|
||||
data-number={7}
|
||||
data-type="1br-type-a"
|
||||
d="M461.65,470.47l1.31,4.54-35.04,12.13,7.97,23.33-1.3.43,1.22,3.71-3.73,1.17c-1.82.57-2.81,2.54-2.19,4.34l10.11,29.25c.66,1.9,2.82,2.82,4.64,1.97l51.46-23.96c1.57-.73,2.34-2.52,1.78-4.16l-2-5.93,10.04-3.56-11.78-34.3,1.19-.41-6.14-18.02-27.53,9.46Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1410,7 +1410,7 @@ function WestWingFloorPlanUpper({
|
||||
data-number={6}
|
||||
data-type="1br-type-d"
|
||||
d="M413.66,395.92l9.27,9.27,7.05,7.05,1.75,1.75-10.26,10.26,19.35,19.35-10.14,10.14,3.16,3.16-24.37,24.37-6.56-6.55-15.79,15.79-30.15-30.15,15.79-15.79-7.74-7.75,42.12-42.12,3.88,3.88,2.66-2.66Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1435,7 +1435,7 @@ function WestWingFloorPlanUpper({
|
||||
data-number={5}
|
||||
data-type="studio-2"
|
||||
d="M389.02,371.28l8.29,8.29,7.16,7.16,1.29,1.28-2.66,2.66,2.74,2.74-43.83,43.83-3.08-3.07-14.08,14.09-21.98-21.98,14.08-14.09,1.06,1.06,31.99-31.98-1.06-1.06,10.42-10.42,5.58,5.58,4.08-4.08Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1460,7 +1460,7 @@ function WestWingFloorPlanUpper({
|
||||
data-number={4}
|
||||
data-type="studio-2"
|
||||
d="M357.37,345.08l-3.16-3.16-43.76,43.76,3.26,3.26-14.09,14.09,22.17,22.17,14.09-14.09-1.14-1.14,31.98-31.99,1.11,1.1,10.42-10.42-5.47-5.47,4.08-4.08-8.5-8.5-7.05-7.05-1.21-1.21-2.73,2.73Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1485,7 +1485,7 @@ function WestWingFloorPlanUpper({
|
||||
data-number={3}
|
||||
data-type="1br-type-d"
|
||||
d="M333.82,316.09l1.65,1.65,7.18,7.18,9.19,9.19-2.73,2.73,3.93,3.93-42.04,42.04-7.69-7.69-15.68,15.68-30.28-30.29,15.68-15.68-6.64-6.64,24.39-24.39,3.12,3.12,10.05-10.05,19.54,19.54,10.32-10.33Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1510,7 +1510,7 @@ function WestWingFloorPlanUpper({
|
||||
data-number={2}
|
||||
data-type="studio-2"
|
||||
d="M244.15,347.32l-20.93-20.93,13.95-13.95,42.36-42.36,4.44,4.44,4.18-4.18,8.51,8.51,7.16,7.16,1.2,1.2-2.67,2.67,3.84,3.84-11.86,11.86-.98-.98-32.02,32.02-3.24-3.24-13.95,13.95Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
@@ -1535,7 +1535,7 @@ function WestWingFloorPlanUpper({
|
||||
data-number={1}
|
||||
data-type="2br-type-a"
|
||||
d="M256.62,238.83l-4.55,4.56-77.95.04.08,6.33-8.57.23-.21,46.2,10.98-.02-.12,17.36,19.04-.1c9.51-.05,18.65,3.71,25.38,10.43l1.21,1.21,54.24-54.24-1.98-1.98,2.06-2.06-14.74-14.74,4.18-4.18-9.04-9.04Z"
|
||||
className="fill-transparent hover:fill-[#00BED7]/40 transition-[fill] cursor-pointer"
|
||||
className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
|
||||
@@ -11,11 +11,7 @@ interface MobileFloorDescriptionProps {
|
||||
onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
||||
}
|
||||
|
||||
const MobileFloorDescription = ({
|
||||
descriptionFloor,
|
||||
floorApartments,
|
||||
isLeft,
|
||||
}: MobileFloorDescriptionProps) => {
|
||||
const MobileFloorDescription = ({ descriptionFloor, floorApartments, isLeft }: MobileFloorDescriptionProps) => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
@@ -24,19 +20,13 @@ const MobileFloorDescription = ({
|
||||
<div className="relative">
|
||||
<div className="flex justify-between pb-4 border-b">
|
||||
<div className="flex flex-col">
|
||||
<p
|
||||
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out text-subheadline-s`}
|
||||
>
|
||||
<p className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out text-subheadline-s`}>
|
||||
{descriptionFloor?.floor} Floor
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-[#73787C] font-semibold text-caption-m">
|
||||
{descriptionFloor?.wing}
|
||||
</p>
|
||||
<p className="text-[#73787C] font-semibold text-caption-m">{descriptionFloor?.wing}</p>
|
||||
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
||||
<p className="font-semibold text-caption-m text-[#00BED7]">
|
||||
{floorApartments.length} units
|
||||
</p>
|
||||
<p className="font-semibold text-caption-m text-[#00BED7]">{floorApartments.length} units</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button3 variant="secondary" icon={<CrossIcon />} onlyIcon />
|
||||
@@ -46,63 +36,45 @@ const MobileFloorDescription = ({
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="flex items-center justify-center p-1">
|
||||
{
|
||||
floorApartments.filter(
|
||||
(apart) => apart.unitType === "Studio Flex"
|
||||
).length
|
||||
}
|
||||
{floorApartments.filter((apart) => apart.unitType === "Studio Flex").length}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C] w-full">Studio Flex</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">{/* Unavailable */}</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="flex items-center justify-center w-full h-full">
|
||||
{
|
||||
floorApartments.filter(
|
||||
(apart) => apart.unitType === "Studio Squared"
|
||||
).length
|
||||
}
|
||||
{floorApartments.filter((apart) => apart.unitType === "Studio Squared").length}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C]">Studio Squared</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">{/* Unavailable */}</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="flex items-center justify-center w-full h-full">
|
||||
{
|
||||
floorApartments.filter(
|
||||
(apart) => apart.unitType === "1 BR Squared"
|
||||
).length
|
||||
}
|
||||
{floorApartments.filter((apart) => apart.unitType === "1 BR Squared").length}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C]">1 BR Squared</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">{/* Unavailable */}</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
||||
<p className="flex items-center justify-center w-full h-full">
|
||||
{
|
||||
floorApartments.filter(
|
||||
(apart) => apart.unitType === "2 BR Squared"
|
||||
).length
|
||||
}
|
||||
{floorApartments.filter((apart) => apart.unitType === "2 BR Squared").length}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C] text-nowrap">
|
||||
2 BR Squared
|
||||
</p>
|
||||
<p className="text-s text-[#73787C] text-nowrap">2 BR Squared</p>
|
||||
</div>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
||||
<p className="text-s text-[#0D1922] text-nowrap">{/* Unavailable */}</p>
|
||||
</div>
|
||||
<Button3 className="justify-center" icon={<RightArrowSliderIcon />}>
|
||||
Explore
|
||||
|
||||
@@ -114,7 +114,7 @@ const FavoriteAppartmentCard = ({ card }: FavoriteAppartmentCardProps) => {
|
||||
</p>
|
||||
<p className="text-[#00BED7] text-m font-semibold">
|
||||
{/* AED {formatNumber(cost, ",", 3, 1)} */}
|
||||
Unavailable
|
||||
{/* Unavailable */}
|
||||
</p>
|
||||
</div>
|
||||
<Button3
|
||||
|
||||
@@ -75,7 +75,7 @@ const FavoriteSliderCard = ({ card, elementRef }: FavoriteSliderCardProps) => {
|
||||
<div className="flex flex-col gap-1 pb-6 border-b">
|
||||
<p className="text-s text-[#73787C]">Price</p>
|
||||
<p className="text-[#0D1922] text-m">
|
||||
Unavailable
|
||||
{/* Unavailable */}
|
||||
{/* AED {formatNumber(card.cost, ",", 3, 1)} */}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -192,7 +192,7 @@ const AboutComplexModal = ({
|
||||
</div>
|
||||
<div className="flex flex-col justify-between flex-1 gap-4 p-6 bg-white rounded-2xl lg:flex-none">
|
||||
<p className="text-[#00BED7] font-semibold text-subheadline-s leading-7">
|
||||
Unavailable
|
||||
{/* Unavailable */}
|
||||
{/* AED {formatNumber(1668888, ",", 3, 1)} */}
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
|
||||
@@ -43,7 +43,7 @@ const SendEnquiryModal = () => {
|
||||
1 bedroom, 609 Sqft{" "}
|
||||
</p>
|
||||
<p className="text-subheadline-s font-semibold text-[#0D192266]">
|
||||
Unavailable
|
||||
{/* Unavailable */}
|
||||
</p>
|
||||
{/* <p className="text-subheadline-s font-semibold text-[#0D192266]">
|
||||
AED {formatNumber(1668888, ",", 3, 1)}
|
||||
|
||||
@@ -322,7 +322,8 @@ function UnitModal({ unit, type }: Props) {
|
||||
.replaceAll(",", " ")}
|
||||
</>
|
||||
) : (
|
||||
"Unavailable"
|
||||
// "Unavailable"
|
||||
""
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -337,11 +338,7 @@ function UnitModal({ unit, type }: Props) {
|
||||
3D tour
|
||||
</Button3>
|
||||
)}
|
||||
<Button3
|
||||
icon={<BookingIcon />}
|
||||
className="text-[13.6px] justify-center w-full"
|
||||
disabled
|
||||
>
|
||||
<Button3 icon={<BookingIcon />} className="text-[13.6px] justify-center w-full" disabled>
|
||||
Send Enquiry
|
||||
</Button3>
|
||||
</div>
|
||||
|
||||
@@ -756,7 +756,8 @@ function UnitModalForSearchPage({ unit, type }: Props) {
|
||||
.replaceAll(",", " ")}
|
||||
</>
|
||||
) : (
|
||||
"Unavailable"
|
||||
// "Unavailable"
|
||||
""
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@ const VirtualTourVideoModal = ({ videoHref }: VirtualTourVideoModalProps) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="absolute z-[99999999] top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] flex justify-center items-center">
|
||||
<div className="fixed z-[99999999] top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] flex justify-center items-center">
|
||||
<div className="aspect-video xl:h-[768px] xl:w-auto w-screen relative select-none">
|
||||
<video autoPlay muted className="w-full" playsInline preload="metadata">
|
||||
<source src={videoHref} type="video/mp4" />
|
||||
|
||||
@@ -82,7 +82,7 @@ const SendEnquiryMobileModal = () => {
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[#00BED7] font-semibold text-subheadline-s pt-6">
|
||||
Unavailable
|
||||
{/* Unavailable */}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -26,9 +26,7 @@ const LayoutCard = ({ apartmentCard, price }: LayoutCardProps) => {
|
||||
const totalArea = Number(_totalArea).toFixed(2);
|
||||
const [isFavorite, setIsFavorite] = useState(false);
|
||||
// const { setFavorites } = useFavorites();
|
||||
const layoutImage = apartmentRoutes.find(
|
||||
(apr) => apr.type === unitType
|
||||
)?.layout;
|
||||
const layoutImage = apartmentRoutes.find((apr) => apr.type === unitType)?.layout;
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
@@ -71,33 +69,22 @@ const LayoutCard = ({ apartmentCard, price }: LayoutCardProps) => {
|
||||
useEffect(() => {
|
||||
const favorites = localStorage.getItem("Favorites");
|
||||
if (favorites) {
|
||||
const _isFavorite = (JSON.parse(favorites) as IAparmentRes[]).some(
|
||||
(apart) => apart.id === apartmentCard.id
|
||||
);
|
||||
const _isFavorite = (JSON.parse(favorites) as IAparmentRes[]).some((apart) => apart.id === apartmentCard.id);
|
||||
setIsFavorite(_isFavorite);
|
||||
}
|
||||
}, [apartmentCard.id]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col p-4 bg-white cursor-pointer select-none rounded-2xl"
|
||||
onClick={handleOnClick}
|
||||
>
|
||||
<div className="flex flex-col p-4 bg-white cursor-pointer select-none rounded-2xl" onClick={handleOnClick}>
|
||||
<div className="flex justify-between gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-[#00BED7] text-s leading-5">{projectName}</p>
|
||||
<div className="text-[#73787C] flex gap-2 items-center w-fit">
|
||||
<p className="font-semibold leading-4 text-caption-m">
|
||||
{wing} Wing
|
||||
</p>
|
||||
<p className="font-semibold leading-4 text-caption-m">{wing} Wing</p>
|
||||
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
||||
<p className="font-semibold leading-4 text-caption-m">
|
||||
Floor {floor}
|
||||
</p>
|
||||
<p className="font-semibold leading-4 text-caption-m">Floor {floor}</p>
|
||||
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
||||
<p className="font-semibold leading-4 text-caption-m">
|
||||
№ {unitNumber}
|
||||
</p>
|
||||
<p className="font-semibold leading-4 text-caption-m">№ {unitNumber}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button3
|
||||
@@ -107,11 +94,7 @@ const LayoutCard = ({ apartmentCard, price }: LayoutCardProps) => {
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full pt-6 rounded-lg aspect-square ">
|
||||
<img
|
||||
src={`${layoutImage}`}
|
||||
alt=""
|
||||
className="object-contain w-full aspect-square"
|
||||
/>
|
||||
<img src={`${layoutImage}`} alt="" className="object-contain w-full aspect-square" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 pt-6">
|
||||
<p className="text-[#0D1922] text-s">
|
||||
@@ -124,7 +107,8 @@ const LayoutCard = ({ apartmentCard, price }: LayoutCardProps) => {
|
||||
currency: "AED",
|
||||
minimumFractionDigits: 0,
|
||||
}).format(price)) ||
|
||||
"Unavailable"}
|
||||
// "Unavailable"
|
||||
""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -153,9 +153,7 @@ function VirtualTourCard({ unit, type }: Props) {
|
||||
if (!favoriteUnits.some((favoriteUnit) => favoriteUnit.id === unit.id)) {
|
||||
setFavoriteUnits([...favoriteUnits, unit]);
|
||||
} else {
|
||||
setFavoriteUnits(
|
||||
favoriteUnits.filter((favoriteUnit) => favoriteUnit.id !== unit.id)
|
||||
);
|
||||
setFavoriteUnits(favoriteUnits.filter((favoriteUnit) => favoriteUnit.id !== unit.id));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -181,12 +179,7 @@ function VirtualTourCard({ unit, type }: Props) {
|
||||
>
|
||||
<div className="p-4 space-y-3 bg-white sm:space-y-4 sm:p-6 sm:rounded-br-none rounded-2xl">
|
||||
<div className="flex items-center gap-4 sm:pb-4 sm:border-b border-[#E2E2DC]">
|
||||
<Button3
|
||||
variant="secondary"
|
||||
icon={<ArrowLeftIcon />}
|
||||
onlyIcon
|
||||
onClick={() => navigate(-1)}
|
||||
/>
|
||||
<Button3 variant="secondary" icon={<ArrowLeftIcon />} onlyIcon onClick={() => navigate(-1)} />
|
||||
<p className="text-[#0D1922] sm:text-xl font-semibold">
|
||||
{unit.unitName}, {unit.totalArea} Sqft
|
||||
</p>
|
||||
@@ -229,7 +222,8 @@ function VirtualTourCard({ unit, type }: Props) {
|
||||
.replaceAll(",", " ")}
|
||||
</>
|
||||
) : (
|
||||
"Unavailable"
|
||||
// "Unavailable"
|
||||
""
|
||||
)}
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
@@ -239,9 +233,7 @@ function VirtualTourCard({ unit, type }: Props) {
|
||||
className="sm:w-[216px] w-full justify-center"
|
||||
disabled
|
||||
>
|
||||
<span className="max-sm:text-xs max-sm:font-semibold">
|
||||
Send Enquiry
|
||||
</span>
|
||||
<span className="max-sm:text-xs max-sm:font-semibold">Send Enquiry</span>
|
||||
</Button3>
|
||||
<Button3
|
||||
variant="secondary"
|
||||
@@ -249,17 +241,13 @@ function VirtualTourCard({ unit, type }: Props) {
|
||||
icon={<InfoIcon className="w-4 h-4 sm:w-5 sm:h-5" />}
|
||||
onlyIcon
|
||||
className="disabled:hover:bg-inherit"
|
||||
onClick={() =>
|
||||
setModal(<UnitModalForSearchPage unit={unit} type={type} />)
|
||||
}
|
||||
onClick={() => setModal(<UnitModalForSearchPage unit={unit} type={type} />)}
|
||||
/>
|
||||
<Button3
|
||||
variant="secondary"
|
||||
size="small"
|
||||
icon={
|
||||
favoriteUnits.some(
|
||||
(favoriteUnit) => favoriteUnit.id === unit.id
|
||||
) ? (
|
||||
favoriteUnits.some((favoriteUnit) => favoriteUnit.id === unit.id) ? (
|
||||
<HeartFilledIcon className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||
) : (
|
||||
<HeartIcon className="w-4 h-4 sm:w-5 sm:h-5" />
|
||||
@@ -280,9 +268,7 @@ function VirtualTourCard({ unit, type }: Props) {
|
||||
<button
|
||||
key={index}
|
||||
className={` text-white text-[10px] font-semibold px-2 py-0.5 rounded-full outline-none transition-colors ${
|
||||
selectedSphere?.roomType === value
|
||||
? "bg-[#00BED7]"
|
||||
: "bg-[#0D192266]"
|
||||
selectedSphere?.roomType === value ? "bg-[#00BED7]" : "bg-[#0D192266]"
|
||||
}`}
|
||||
onClick={() => handleClickRoomType(value)}
|
||||
>
|
||||
@@ -295,11 +281,7 @@ function VirtualTourCard({ unit, type }: Props) {
|
||||
onClick={() => setIsShow((prev) => !prev)}
|
||||
>
|
||||
<span>{isShow ? "Hide" : "Show"}</span>
|
||||
<ChevronDownIcon
|
||||
className={`w-5 h-5 transition-transform ${
|
||||
isShow ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
<ChevronDownIcon className={`w-5 h-5 transition-transform ${isShow ? "rotate-180" : ""}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -155,7 +155,7 @@ const VirtualTourSidebar = ({ appartmentSphere, apartment }: VirtualTourSidebarP
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h2 className="text-subheadline-s font-semibold text-[#00BED7] pt-4">Unavailable</h2>
|
||||
<h2 className="text-subheadline-s font-semibold text-[#00BED7] pt-4">{/* Unavailable */}</h2>
|
||||
<div className="flex gap-2 pt-4 ">
|
||||
<Button3
|
||||
icon={<BookingIcon />}
|
||||
|
||||
@@ -4,35 +4,35 @@
|
||||
"d": "M119.43,335.96c-51.69,9.07-116.64,7.22-117.92,7.18-.04,0-.04,0-.08,0-.16,0-.65,0-1.44,0v130.87h83.59l179.33-17.33s82.58-6.17,108.58-8.17c25.22-1.94,68.09-8.74,70.63-9.15.08-.01.16-.02.24-.03.2-.02.41-.02.61,0l175.63,8.06c2.94.14,5.4-2.21,5.4-5.14v-23.12c0-2.72-2.13-4.98-4.85-5.14l-50.4-3c-2.72-.16-4.85-2.41-4.85-5.14v-72.11c0-2.58-1.92-4.77-4.49-5.1l-189.41-24.57c-.44-.06-.89-.06-1.33,0l-115.96,15c-.54.07-1.08.05-1.62-.05l-30.07-5.65c-.53-.1-1.07-.12-1.61-.05l-91.28,11.64c-2.57.33-4.5,2.51-4.5,5.1v.9c0,2.47-1.75,4.6-4.19,5.02Z"
|
||||
},
|
||||
{
|
||||
"data-name": "31 floor",
|
||||
"data-name": "West 31 floor",
|
||||
"d": "M619.83,496.74c2.28.1,4.17-1.72,4.17-4v-36.14c0-2.13-1.67-3.89-3.81-3.99l-177.37-8.59c-.33-.02-.66,0-.98.07l-37.27,7.45-321.35,29.64H6c-2.21,0-4,1.79-4,4v32.82c0,2.21,1.79,4,4,4h77.22l321.35-26.19,33.22-6.77c.32-.07.64-.09.97-.08l181.06,7.77Z"
|
||||
},
|
||||
{
|
||||
"data-name": "30 floor",
|
||||
"data-name": "West 30 floor",
|
||||
"d": "M619.88,545.43c2.26.07,4.12-1.74,4.12-4v-33.13c0-2.13-1.67-3.88-3.79-3.99l-180.18-9.29c-.31-.02-.61,0-.91.06l-34.46,6.2-321.44,25.35H6c-2.21,0-4,1.79-4,4v32.36c0,2.21,1.79,4,4,4h77.22l321.44-21.26,34.52-5.77c.26-.04.52-.06.78-.05l179.92,5.52Z"
|
||||
},
|
||||
{
|
||||
"data-name": "29 floor",
|
||||
"data-name": "West 29 floor",
|
||||
"d": "M619.9,594.49c2.25.05,4.1-1.75,4.1-4v-32.46c0-2.14-1.68-3.9-3.82-4l-180.17-8.02c-.29-.01-.59,0-.88.06l-34.48,6.11-321.44,20.11H6c-2.21,0-4,1.79-4,4v31.71c0,2.21,1.79,4,4,4h77.22l321.44-17.22,34.6-4.56c.21-.03.41-.04.62-.03l180.03,4.31Z"
|
||||
},
|
||||
{
|
||||
"data-name": "28 floor",
|
||||
"data-name": "West 28 floor",
|
||||
"d": "M619.93,644.59c2.24.04,4.07-1.76,4.07-4v-33.5c0-2.15-1.7-3.91-3.84-4l-180.22-7.08c-.25-.01-.5,0-.74.04l-34.54,5.11-321.44,17.1H6c-2.21,0-4,1.79-4,4v32.73c0,2.21,1.79,4,4,4h77.22l321.44-14.15,34.91-3.54,180.36,3.28Z"
|
||||
},
|
||||
{
|
||||
"data-name": "27 floor",
|
||||
"data-name": "West 27 floor",
|
||||
"d": "M619.95,693.38c2.23.03,4.05-1.77,4.05-4v-32.58c0-2.16-1.71-3.93-3.87-4l-180.28-5.8c-.19,0-.38,0-.57.02l-34.62,3.87-321.44,13.28H6c-2.21,0-4,1.79-4,4v31.82c0,2.21,1.79,4,4,4h77.22l321.44-10.39,34.91-2.32,180.39,2.09Z"
|
||||
},
|
||||
{
|
||||
"data-name": "26 floor",
|
||||
"data-name": "West 26 floor",
|
||||
"d": "M619.98,742.77c2.22.01,4.02-1.78,4.02-4v-33.03c0-2.17-1.73-3.94-3.9-4l-180.54-4.74-34.91,2.79-321.44,9.95H6c-2.21,0-4,1.79-4,4v32.27c0,2.21,1.79,4,4,4h77.22l321.44-7.02,34.91-1.18,180.41.98Z"
|
||||
},
|
||||
{
|
||||
"data-name": "25 floor",
|
||||
"data-name": "West 25 floor",
|
||||
"d": "M620,793.23c2.21,0,4-1.79,4-4v-33.58c0-2.18-1.74-3.96-3.92-4l-180.51-3.65-34.91,1.65-321.44,6.55H6c-2.21,0-4,1.79-4,4v32.8c0,2.21,1.79,4,4,4h77.22l321.44-3.59,34.91-.02,180.44-.16Z"
|
||||
},
|
||||
{
|
||||
"data-name": "24 floor",
|
||||
"data-name": "West 24 floor",
|
||||
"d": "M620.03,841.7c2.2-.02,3.97-1.8,3.97-4v-34.49c0-2.2-1.78-3.99-3.97-4l-180.66-1.21-34.95.47-321.78,3H5c-2.21,0-4,1.79-4,4v32.45c0,2.21,1.79,4,4,4h77.65l321.78-.06,34.95,1.14,180.66-1.3Z"
|
||||
},
|
||||
{
|
||||
@@ -40,71 +40,71 @@
|
||||
"d": "M627.72,936v-71.2c0-2.87-2.33-5.19-5.2-5.16l-187.57.19h-68.81l-284.44-1.83H0v152.02l5.12.09,350.4,12.65,49.45,4.24,240.96-4.64c2.81-.06,5.06-2.35,5.06-5.17v-70.86c0-2.85-2.31-5.16-5.16-5.16h-12.96c-2.85,0-5.16-2.31-5.16-5.16Z"
|
||||
},
|
||||
{
|
||||
"data-name": "21 floor",
|
||||
"data-name": "West 21 floor",
|
||||
"d": "M619.13,1087.14c2.16-.07,3.87-1.84,3.87-4v-41.27c0-2.25-1.84-4.05-4.09-4l-214.91,4.75-38.57-4.05-283.21-13.57H5c-2.21,0-4,1.79-4,4v38.17c0,2.23,1.83,4.03,4.06,4l77.16-1.11,321.78,19.94,31.99,3,183.14-5.86Z"
|
||||
},
|
||||
{
|
||||
"data-name": "20 floor",
|
||||
"data-name": "West 20 floor",
|
||||
"d": "M619.15,1135.94c2.15-.08,3.85-1.85,3.85-4v-35.92c0-2.27-1.88-4.09-4.15-4l-182.53,6.8c-.22.01-.45,0-.67-.03l-32-4.18-321.44-19.61H5c-2.21,0-4,1.79-4,4v32.75c0,2.21,1.79,4,4,4h77.22l321.44,22.58,31.97,4.62c.24.03.48.05.73.04l182.8-7.05Z"
|
||||
},
|
||||
{
|
||||
"data-name": "19 floor",
|
||||
"data-name": "West 19 floor",
|
||||
"d": "M619.15,1187.25c2.15-.08,3.85-1.85,3.85-4v-35.58c0-2.27-1.88-4.08-4.14-4l-182.48,6.5c-.26.01-.52-.01-.78-.05l-31.95-5.16-321.44-22.96H5c-2.21,0-4,1.79-4,4v32.44c0,2.21,1.79,4,4,4h77.22l321.44,25.89,31.92,5.6c.28.05.56.06.84.05l182.74-6.73Z"
|
||||
},
|
||||
{
|
||||
"data-name": "18 floor",
|
||||
"data-name": "West 18 floor",
|
||||
"d": "M619.2,1234.92c2.13-.11,3.8-1.87,3.8-4v-33.95c0-2.27-1.89-4.09-4.17-4l-182.37,7.57c-.31.01-.63-.01-.93-.07l-31.87-6.25-321.44-26.22H5c-2.21,0-4,1.79-4,4v32.09c0,2.21,1.79,4,4,4h77.22l321.44,29.13,31.83,6.67c.33.07.68.1,1.02.08l182.69-9.05Z"
|
||||
},
|
||||
{
|
||||
"data-name": "17 floor",
|
||||
"data-name": "West 17 floor",
|
||||
"d": "M619.22,1284.73c2.12-.11,3.78-1.87,3.78-3.99v-34.14c0-2.29-1.91-4.11-4.19-4l-182.26,8.73c-.37.02-.75-.02-1.11-.1l-31.79-7.53-321.44-29.7H5c-2.21,0-4,1.79-4,4v32.28c0,2.21,1.79,4,4,4h77.22l321.15,32.59c.19.02.38.05.57.1l31.46,7.88c.39.1.79.14,1.2.12l182.63-10.24Z"
|
||||
},
|
||||
{
|
||||
"data-name": "16 floor",
|
||||
"data-name": "West 16 floor",
|
||||
"d": "M619.25,1334.47c2.11-.14,3.75-1.88,3.75-4v-34.62c0-2.29-1.93-4.12-4.22-3.99l-182.22,9.97c-.38.02-.76-.02-1.14-.1l-31.77-7.48-321.44-34.25H5c-2.21,0-4,1.79-4,4v32.73c0,2.21,1.79,4,4,4h77.22l321.44,37.21,31.73,7.91c.4.1.81.14,1.22.11l182.64-11.49Z"
|
||||
},
|
||||
{
|
||||
"data-name": "15 floor",
|
||||
"data-name": "West 15 floor",
|
||||
"d": "M619.28,1383.25c2.1-.15,3.72-1.89,3.72-3.99v-34.84c0-2.31-1.94-4.14-4.24-4l-182.11,11.17c-.44.02-.88-.02-1.3-.14l-31.41-8.57c-.19-.06-.39-.1-.59-.12l-321.14-37.76H5c-2.21,0-4,1.79-4,4v32.95c0,2.21,1.79,4,4,4h77.22l321.13,40.73c.2.02.4.06.6.12l31.36,9.01c.45.12.92.17,1.38.14l182.59-12.7Z"
|
||||
},
|
||||
{
|
||||
"data-name": "14 floor",
|
||||
"data-name": "West 14 floor",
|
||||
"d": "M619.3,1433.32c2.09-.15,3.7-1.89,3.7-3.99v-35.79c0-2.32-1.97-4.15-4.29-3.98l-181.96,13.35c-.5.03-1-.02-1.48-.17l-31.27-9.74c-.23-.07-.46-.12-.7-.15l-321.08-39.55-77.15-1.23c-2.23-.04-4.06,1.76-4.06,3.99v32.58c0,2.21,1.79,4,4,4h77.22l321.08,43.8c.24.03.47.08.7.16l31.24,10.16c.49.16,1.02.22,1.54.18l182.52-13.62Z"
|
||||
},
|
||||
{
|
||||
"data-name": "13 floor",
|
||||
"data-name": "West 13 floor",
|
||||
"d": "M619.32,1482.44c2.08-.16,3.68-1.9,3.68-3.98v-34.98c0-2.33-1.99-4.17-4.31-3.99l-181.88,14.22c-.54.04-1.08-.03-1.59-.2l-31.2-10.52c-.24-.08-.49-.14-.74-.17l-321.06-43.54-77.16-1.22c-2.23-.03-4.06,1.77-4.06,4v31.89c0,2.19,1.76,3.97,3.94,4l77.27,1.09,321.05,46.56c.26.04.51.1.75.18l31.17,10.94c.53.18,1.08.26,1.64.21l182.49-14.49Z"
|
||||
},
|
||||
{
|
||||
"data-name": "12 floor",
|
||||
"data-name": "West 12 floor",
|
||||
"d": "M619.32,1532.39c2.08-.17,3.68-1.9,3.68-3.99v-35.14c0-2.34-1.99-4.18-4.31-3.99l-181.88,14.27c-.54.04-1.08-.03-1.6-.2l-31.22-10.57c-.22-.07-.45-.13-.69-.16l-321.09-48.33-77.15-1.22c-2.23-.03-4.06,1.77-4.06,4v32.11c0,2.16,1.72,3.93,3.88,3.99l77.34,2.32,321.07,50.08c.24.03.48.09.71.17l31.18,10.99c.53.18,1.09.26,1.65.21l182.48-14.54Z"
|
||||
},
|
||||
{
|
||||
"data-name": "11 floor",
|
||||
"data-name": "West 11 floor",
|
||||
"d": "M619.32,1582.54c2.08-.16,3.68-1.9,3.68-3.99v-35.06c0-2.33-1.98-4.17-4.31-3.99l-181.82,14.12c-.58.04-1.16-.04-1.71-.24l-31.13-11.63c-.25-.09-.51-.16-.78-.2l-321.04-50.27-77.16-1.22c-2.23-.03-4.06,1.77-4.06,4v32.03c0,2.16,1.72,3.93,3.88,4l77.34,2.31,321.02,52.02c.27.04.54.11.8.21l31.09,12.04c.56.22,1.16.31,1.76.26l182.42-14.39Z"
|
||||
},
|
||||
{
|
||||
"data-name": "10 floor",
|
||||
"data-name": "West 10 floor",
|
||||
"d": "M619.37,1631.09c2.06-.19,3.63-1.91,3.63-3.98v-35.53c0-2.35-2.02-4.19-4.36-3.98l-181.74,16.53c-.6.05-1.2-.03-1.76-.24l-31.14-11.63c-.23-.09-.46-.15-.7-.19l-320.76-56.72c-.21-.04-.42-.06-.63-.06l-76.84-1.23c-2.23-.03-4.06,1.77-4.06,4v32.47c0,2.16,1.72,3.93,3.88,4l77.04,2.33c.2.01.4.03.6.06l320.77,58.49c.25.04.49.11.73.2l31.1,12.05c.58.22,1.2.31,1.81.25l182.44-16.82Z"
|
||||
},
|
||||
{
|
||||
"data-name": "9 floor",
|
||||
"data-name": "West 9 floor",
|
||||
"d": "M619.39,1680.05c2.05-.2,3.61-1.92,3.61-3.98v-35.28c0-2.36-2.03-4.21-4.39-3.98l-181.64,17.55c-.64.06-1.29-.03-1.89-.28l-31.04-12.64c-.25-.11-.51-.18-.77-.23l-320.71-59.86c-.22-.04-.45-.07-.67-.07l-76.82-1.22c-2.23-.03-4.06,1.77-4.06,4v32.24c0,2.17,1.72,3.94,3.88,4l77.02,2.32c.21.01.43.03.63.07l320.71,61.62c.27.05.54.13.8.24l31.01,13.06c.61.25,1.28.36,1.94.29l182.39-17.85Z"
|
||||
},
|
||||
{
|
||||
"data-name": "8 floor",
|
||||
"data-name": "West 8 floor",
|
||||
"d": "M619.44,1728.8c2.03-.22,3.56-1.93,3.56-3.97v-33.7c0-2.37-2.05-4.22-4.41-3.98l-181.55,18.53c-.69.07-1.38-.04-2.02-.32l-30.96-13.62c-.27-.12-.55-.21-.84-.26l-320.71-62.59c-.19-.04-.38-.06-.58-.07l-76.74-3.62c-2.28-.11-4.19,1.71-4.19,3.99v31.93c0,2.11,1.65,3.86,3.76,3.99l77.46,4.75,320.99,64.39c.3.06.59.15.86.28l30.92,14.02c.65.29,1.38.41,2.09.33l182.36-20.08Z"
|
||||
},
|
||||
{
|
||||
"data-name": "7 floor",
|
||||
"data-name": "West 7 floor",
|
||||
"d": "M619.47,1778.44c2.02-.24,3.53-1.94,3.53-3.97v-35.41c0-2.39-2.09-4.25-4.46-3.97l-181.39,21.09c-.76.09-1.52-.04-2.21-.38l-30.84-14.94c-.3-.14-.61-.25-.93-.31l-320.64-66.61c-.21-.05-.41-.07-.62-.08l-76.71-3.66c-2.28-.11-4.19,1.71-4.19,4v32.36c0,2.11,1.64,3.86,3.75,3.99l77.17,4.78c.2.01.39.04.59.08l320.65,68.37c.33.07.65.18.95.33l30.81,15.36c.7.35,1.48.48,2.25.39l182.29-21.42Z"
|
||||
},
|
||||
{
|
||||
"data-name": "6 floor",
|
||||
"data-name": "West 6 floor",
|
||||
"d": "M619.47,1828.49c2.02-.24,3.53-1.94,3.53-3.97v-34.3c0-2.38-2.07-4.24-4.43-3.98l-181.37,19.78c-.79.09-1.58-.06-2.29-.43l-30.78-16.08c-.31-.16-.65-.28-1-.36l-320.59-70.19c-.22-.05-.44-.08-.66-.09l-76.69-3.67c-2.28-.11-4.19,1.71-4.19,4v32.5c0,2.11,1.64,3.86,3.75,3.99l77.15,4.8c.21.02.42.05.63.09l320.59,71.97c.35.07.69.2,1.01.37l30.74,16.49c.72.38,1.54.54,2.36.44l182.23-21.36Z"
|
||||
},
|
||||
{
|
||||
"data-name": "5 floor",
|
||||
"data-name": "West 5 floor",
|
||||
"d": "M619.52,1876.99c1.99-.26,3.48-1.96,3.48-3.97v-34.43c0-2.4-2.1-4.26-4.49-3.97l-181.23,22.23c-.84.1-1.69-.06-2.43-.47l-30.71-17.08c-.32-.18-.67-.32-1.03-.4l-320.51-75.21c-.26-.06-.52-.1-.79-.1l-76.69-2.46c-2.26-.07-4.13,1.74-4.13,4v32.65c0,2.13,1.68,3.89,3.81,3.99l77.02,3.58c.25.01.5.04.75.1l320.51,76.98c.37.09.72.23,1.05.42l30.67,17.48c.76.44,1.64.61,2.5.5l182.2-23.84Z"
|
||||
},
|
||||
{
|
||||
|
||||
@@ -66,6 +66,7 @@ function ComplexWingPage() {
|
||||
if (path["data-name"].includes("floor")) {
|
||||
const wing = path["data-name"].split(" ")[0].toLowerCase() as "east" | "west";
|
||||
const floor = path["data-name"].split(" ")[1];
|
||||
|
||||
setSidebarComponent({
|
||||
element: <FloorPlan wing={wing} floor={floor} />,
|
||||
name: "Floor",
|
||||
|
||||
@@ -203,9 +203,7 @@ function FavoritesPage() {
|
||||
if (!favoriteUnits.some((favoriteUnit) => favoriteUnit.id === unit.id)) {
|
||||
setFavoriteUnits([...favoriteUnits, unit]);
|
||||
} else {
|
||||
setFavoriteUnits(
|
||||
favoriteUnits.filter((favoriteUnit) => favoriteUnit.id !== unit.id)
|
||||
);
|
||||
setFavoriteUnits(favoriteUnits.filter((favoriteUnit) => favoriteUnit.id !== unit.id));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -214,24 +212,18 @@ function FavoritesPage() {
|
||||
<div className="p-4 sm:p-6">
|
||||
<div className="pb-4 border-b border-[#E2E2DC] flex justify-between">
|
||||
<p className="text-xl font-semibold sm:text-2xl">
|
||||
<span className="text-[#0D1922]">Favorites</span>{" "}
|
||||
{favoriteUnits.length}
|
||||
<span className="text-[#0D1922]">Favorites</span> {favoriteUnits.length}
|
||||
</p>
|
||||
</div>
|
||||
{favoriteUnits.length > 0 ? (
|
||||
<div className="grid gap-4 pt-4 xl:grid-cols-4 lg:grid-cols-3 sm:grid-cols-2">
|
||||
{favoriteUnits.map((unit) => (
|
||||
<div
|
||||
key={unit.id}
|
||||
className="flex flex-col justify-between p-4 space-y-4 bg-white rounded-2xl"
|
||||
>
|
||||
<div key={unit.id} className="flex flex-col justify-between p-4 space-y-4 bg-white rounded-2xl">
|
||||
<div className="flex justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm text-[#00BED7]">{unit.projectName}</p>
|
||||
<div className="flex items-center gap-2 text-xs font-semibold text-[#73787C]">
|
||||
<p className="">
|
||||
{unit.unitNo[0] === "E" ? "East" : "West"} Wing
|
||||
</p>
|
||||
<p className="">{unit.unitNo[0] === "E" ? "East" : "West"} Wing</p>
|
||||
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
||||
<p>{unit.floor}</p>
|
||||
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
||||
@@ -242,9 +234,7 @@ function FavoritesPage() {
|
||||
className="w-10 h-10 flex items-center justify-center border border-[#E2E2DC] rounded-full bg-[#FFFFFF] bg-opacity-80 hover:text-[#0D1922] hover:bg-opacity-100 hover:border-[#00BED7] transition-all"
|
||||
onClick={() => addOrRemoveFromFavorites(unit)}
|
||||
>
|
||||
{favoriteUnits.some(
|
||||
(favoriteUnit) => favoriteUnit.id === unit.id
|
||||
) ? (
|
||||
{favoriteUnits.some((favoriteUnit) => favoriteUnit.id === unit.id) ? (
|
||||
<HeartFilledIcon className="w-5 h-5" />
|
||||
) : (
|
||||
<HeartIcon className="w-5 h-5" />
|
||||
@@ -257,21 +247,12 @@ function FavoritesPage() {
|
||||
setModal(
|
||||
<UnitModalForSearchPage
|
||||
unit={unit}
|
||||
type={
|
||||
unitTypes.find(
|
||||
(unitType) =>
|
||||
unitType.type === getTypeByUnitNo(unit.unitNo)
|
||||
)?.type || ""
|
||||
}
|
||||
type={unitTypes.find((unitType) => unitType.type === getTypeByUnitNo(unit.unitNo))?.type || ""}
|
||||
/>
|
||||
)
|
||||
}
|
||||
>
|
||||
<img
|
||||
src={getImageSrc(unit.unitNo)}
|
||||
alt=""
|
||||
className="max-h-[240px] pointer-events-none"
|
||||
/>
|
||||
<img src={getImageSrc(unit.unitNo)} alt="" className="max-h-[240px] pointer-events-none" />
|
||||
</div>
|
||||
<div
|
||||
className="space-y-1 cursor-pointer"
|
||||
@@ -279,12 +260,7 @@ function FavoritesPage() {
|
||||
setModal(
|
||||
<UnitModalForSearchPage
|
||||
unit={unit}
|
||||
type={
|
||||
unitTypes.find(
|
||||
(unitType) =>
|
||||
unitType.type === getTypeByUnitNo(unit.unitNo)
|
||||
)?.type || ""
|
||||
}
|
||||
type={unitTypes.find((unitType) => unitType.type === getTypeByUnitNo(unit.unitNo))?.type || ""}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -293,17 +269,13 @@ function FavoritesPage() {
|
||||
{unit.unitType}, {unit.totalArea} Sqft
|
||||
</p>
|
||||
<p className="text-xl text-[#00BED7] font-semibold">
|
||||
{(unit.unitPrice &&
|
||||
`AED ${unit.unitPrice.toLocaleString()}`) ||
|
||||
"Unavailable"}
|
||||
{(unit.unitPrice && `AED ${unit.unitPrice.toLocaleString()}`) ||
|
||||
// "Unavailable"
|
||||
""}
|
||||
</p>
|
||||
</div>
|
||||
<div className="">
|
||||
<Button3
|
||||
icon={<BookingIcon />}
|
||||
className="justify-center w-full text-sm"
|
||||
disabled
|
||||
>
|
||||
<Button3 icon={<BookingIcon />} className="justify-center w-full text-sm" disabled>
|
||||
Send Enquiry
|
||||
</Button3>
|
||||
</div>
|
||||
@@ -319,10 +291,7 @@ function FavoritesPage() {
|
||||
<span className="text-[#00BED7]">in your favorites</span>
|
||||
</p>
|
||||
<div className="px-8 space-y-2 text-sm sm:text-base sm:px-16">
|
||||
<p>
|
||||
Use the search function and add the ones you like to your
|
||||
favorites.
|
||||
</p>
|
||||
<p>Use the search function and add the ones you like to your favorites.</p>
|
||||
<p>Apartments added from the 3D model will also appear here.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import _eastWingPaths from "../data/EastWingMobilePaths.json";
|
||||
import _westWingPaths from "../data/WestWingMobilePaths.json";
|
||||
@@ -75,10 +76,9 @@ function FloorSelectionMobilePage({ wing, onUnselectWing, onSelectPath }: Props)
|
||||
|
||||
if (name?.includes("floor")) {
|
||||
const floor = name.split(" ")[1];
|
||||
const wing = name.split(" ")[0];
|
||||
setName(`${floor} floor`);
|
||||
|
||||
if (wing === "East") {
|
||||
if (wing === "east") {
|
||||
setItems([
|
||||
{
|
||||
count: 7,
|
||||
@@ -222,7 +222,7 @@ function FloorSelectionMobilePage({ wing, onUnselectWing, onSelectPath }: Props)
|
||||
key={index}
|
||||
{...path}
|
||||
className={`fill-[#00bed766] transition-[fill] ${
|
||||
selectedPath && path["data-name"] === selectedPathName ? "fill-[#00bed7]/80" : "fill-[#00bed7]/40"
|
||||
selectedPath && path["data-name"] === selectedPathName ? "fill-[#00bed7]/70" : "fill-[#00bed7]/20"
|
||||
}`}
|
||||
onClick={() => handleClickPath(path)}
|
||||
/>
|
||||
@@ -235,7 +235,7 @@ function FloorSelectionMobilePage({ wing, onUnselectWing, onSelectPath }: Props)
|
||||
key={index}
|
||||
{...path}
|
||||
className={`fill-[#00bed766] transition-[fill] ${
|
||||
selectedPath && path["data-name"] === selectedPathName ? "fill-[#00bed7]/80" : "fill-[#00bed7]/40"
|
||||
selectedPath && path["data-name"] === selectedPathName ? "fill-[#00bed7]/70" : "fill-[#00bed7]/20"
|
||||
}`}
|
||||
onClick={() => (setSelectedPath(path), setSelectedPathName(path["data-name"]))}
|
||||
/>
|
||||
@@ -254,7 +254,7 @@ function FloorSelectionMobilePage({ wing, onUnselectWing, onSelectPath }: Props)
|
||||
<div className="w-full p-4 space-y-4 bg-white rounded-lg">
|
||||
<div className="relative flex items-start justify-between pb-4 border-b border-[#E2E2DC]">
|
||||
<div>
|
||||
<p className="font-semibold text-[#0D1922]">{selectedPathName}</p>
|
||||
<p className="font-semibold text-[#0D1922]">{selectedPathName?.split(" ")[1]} floor</p>
|
||||
<div className="">
|
||||
<p className="text-[#0D1922]/70 text-xs font-semibold capitalize">{wing} Wing</p>
|
||||
{/* <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div> */}
|
||||
|
||||
+55
-208
@@ -29,10 +29,7 @@ function SearchPage() {
|
||||
const [cost, setCost] = useState<number[]>([minCost, maxCost]);
|
||||
const [minTotalArea] = useState<number>(341);
|
||||
const [maxTotalArea] = useState<number>(1058);
|
||||
const [totalArea, setTotalArea] = useState<number[]>([
|
||||
minTotalArea,
|
||||
maxTotalArea,
|
||||
]);
|
||||
const [totalArea, setTotalArea] = useState<number[]>([minTotalArea, maxTotalArea]);
|
||||
const [minFloor] = useState<number>(5);
|
||||
const [maxFloor] = useState<number>(31);
|
||||
const [floor, setFloor] = useState<number[]>([minFloor, maxFloor]);
|
||||
@@ -245,9 +242,7 @@ function SearchPage() {
|
||||
if (!favoriteUnits.some((favoriteUnit) => favoriteUnit.id === unit.id)) {
|
||||
setFavoriteUnits([...favoriteUnits, unit]);
|
||||
} else {
|
||||
setFavoriteUnits(
|
||||
favoriteUnits.filter((favoriteUnit) => favoriteUnit.id !== unit.id)
|
||||
);
|
||||
setFavoriteUnits(favoriteUnits.filter((favoriteUnit) => favoriteUnit.id !== unit.id));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -255,11 +250,7 @@ function SearchPage() {
|
||||
setModal(
|
||||
<UnitModalForSearchPage
|
||||
unit={unit}
|
||||
type={
|
||||
unitTypes.find(
|
||||
(unitType) => unitType.type === getTypeByUnitNo(unit.unitNo)
|
||||
)?.type || ""
|
||||
}
|
||||
type={unitTypes.find((unitType) => unitType.type === getTypeByUnitNo(unit.unitNo))?.type || ""}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -269,55 +260,30 @@ function SearchPage() {
|
||||
|
||||
useEffect(() => {
|
||||
let newFilteredUnits = units
|
||||
.filter((unit) => (unitTypeFilters.length ? unitTypeFilters.includes(unit.unitType) : unit))
|
||||
.filter((unit) =>
|
||||
unitTypeFilters.length ? unitTypeFilters.includes(unit.unitType) : unit
|
||||
)
|
||||
.filter((unit) =>
|
||||
unitViewFilters.length
|
||||
? unitViewFilters.some((unitViewFilter) =>
|
||||
unit.unitView.includes(unitViewFilter)
|
||||
)
|
||||
: unit
|
||||
)
|
||||
.filter(
|
||||
(unit) =>
|
||||
unit.totalArea >= totalArea[0] && unit.totalArea <= totalArea[1]
|
||||
unitViewFilters.length ? unitViewFilters.some((unitViewFilter) => unit.unitView.includes(unitViewFilter)) : unit
|
||||
)
|
||||
.filter((unit) => unit.totalArea >= totalArea[0] && unit.totalArea <= totalArea[1])
|
||||
.filter((unit) => unit.floor >= floor[0] && unit.floor <= floor[1]);
|
||||
|
||||
console.log("isSortPriceAsc", isSortPriceAsc);
|
||||
|
||||
if (isSortPriceAsc !== undefined) {
|
||||
if (isSortPriceAsc) {
|
||||
newFilteredUnits = newFilteredUnits.sort(
|
||||
(a, b) => (b.unitPrice || 0) - (a.unitPrice || 0)
|
||||
);
|
||||
newFilteredUnits = newFilteredUnits.sort((a, b) => (b.unitPrice || 0) - (a.unitPrice || 0));
|
||||
} else {
|
||||
newFilteredUnits = newFilteredUnits.sort(
|
||||
(a, b) => (a.unitPrice || 0) - (b.unitPrice || 0)
|
||||
);
|
||||
newFilteredUnits = newFilteredUnits.sort((a, b) => (a.unitPrice || 0) - (b.unitPrice || 0));
|
||||
}
|
||||
}
|
||||
|
||||
setFilteredUnits(newFilteredUnits);
|
||||
|
||||
setMinCost(
|
||||
Math.min(
|
||||
...newFilteredUnits.map((unit) => unit.unitPrice!).filter(Boolean)
|
||||
)
|
||||
);
|
||||
setMaxCost(
|
||||
Math.max(
|
||||
...newFilteredUnits.map((unit) => unit.unitPrice!).filter(Boolean)
|
||||
)
|
||||
);
|
||||
setMinCost(Math.min(...newFilteredUnits.map((unit) => unit.unitPrice!).filter(Boolean)));
|
||||
setMaxCost(Math.max(...newFilteredUnits.map((unit) => unit.unitPrice!).filter(Boolean)));
|
||||
setCost([
|
||||
Math.min(
|
||||
...newFilteredUnits.map((unit) => unit.unitPrice!).filter(Boolean)
|
||||
),
|
||||
Math.max(
|
||||
...newFilteredUnits.map((unit) => unit.unitPrice!).filter(Boolean)
|
||||
),
|
||||
Math.min(...newFilteredUnits.map((unit) => unit.unitPrice!).filter(Boolean)),
|
||||
Math.max(...newFilteredUnits.map((unit) => unit.unitPrice!).filter(Boolean)),
|
||||
]);
|
||||
|
||||
// setMinTotalArea(
|
||||
@@ -357,14 +323,7 @@ function SearchPage() {
|
||||
// Math.min(...newFilteredUnits.map((unit) => unit.floor).filter(Boolean)),
|
||||
// Math.max(...newFilteredUnits.map((unit) => unit.floor).filter(Boolean)),
|
||||
// ]);
|
||||
}, [
|
||||
units,
|
||||
unitTypeFilters,
|
||||
unitViewFilters,
|
||||
totalArea,
|
||||
floor,
|
||||
isSortPriceAsc,
|
||||
]);
|
||||
}, [units, unitTypeFilters, unitViewFilters, totalArea, floor, isSortPriceAsc]);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (!units.length) return;
|
||||
@@ -412,9 +371,7 @@ function SearchPage() {
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between pb-4 border-b border-[#E2E2DC]">
|
||||
<p className="lg:text-2xl text-xl text-[#0D1922] font-semibold">
|
||||
Filters
|
||||
</p>
|
||||
<p className="lg:text-2xl text-xl text-[#0D1922] font-semibold">Filters</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
className="w-10 h-10 bg-white rounded-full flex items-center justify-center bg-opacity-80 hover:bg-opacity-100 hover:text-[#0D1922] transition-all"
|
||||
@@ -437,18 +394,12 @@ function SearchPage() {
|
||||
<div className="flex items-center gap-3">
|
||||
<Checkbox2
|
||||
filterName="Studio Flex"
|
||||
checked={unitTypeFilters.some(
|
||||
(unitTypeFilter) => unitTypeFilter === "Studio Flex"
|
||||
)}
|
||||
checked={unitTypeFilters.some((unitTypeFilter) => unitTypeFilter === "Studio Flex")}
|
||||
onChange={(isChecked, filterName) => {
|
||||
if (isChecked) {
|
||||
setUnitTypeFilters((prev) => [...prev, filterName]);
|
||||
} else {
|
||||
setUnitTypeFilters(
|
||||
unitTypeFilters.filter(
|
||||
(unitTypeFilter) => unitTypeFilter !== filterName
|
||||
)
|
||||
);
|
||||
setUnitTypeFilters(unitTypeFilters.filter((unitTypeFilter) => unitTypeFilter !== filterName));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@@ -456,10 +407,7 @@ function SearchPage() {
|
||||
</div>
|
||||
<div className="px-2 h-6 bg-[#00BED7] rounded-full flex items-center justify-center">
|
||||
<p className="text-xs font-semibold text-white">
|
||||
{
|
||||
units.filter((unit) => unit.unitType === "Studio Flex")
|
||||
.length
|
||||
}
|
||||
{units.filter((unit) => unit.unitType === "Studio Flex").length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -467,18 +415,12 @@ function SearchPage() {
|
||||
<div className="flex items-center gap-3">
|
||||
<Checkbox2
|
||||
filterName="Studio Squared"
|
||||
checked={unitTypeFilters.some(
|
||||
(unitTypeFilter) => unitTypeFilter === "Studio Squared"
|
||||
)}
|
||||
checked={unitTypeFilters.some((unitTypeFilter) => unitTypeFilter === "Studio Squared")}
|
||||
onChange={(isChecked, filterName) => {
|
||||
if (isChecked) {
|
||||
setUnitTypeFilters((prev) => [...prev, filterName]);
|
||||
} else {
|
||||
setUnitTypeFilters(
|
||||
unitTypeFilters.filter(
|
||||
(unitTypeFilter) => unitTypeFilter !== filterName
|
||||
)
|
||||
);
|
||||
setUnitTypeFilters(unitTypeFilters.filter((unitTypeFilter) => unitTypeFilter !== filterName));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@@ -486,10 +428,7 @@ function SearchPage() {
|
||||
</div>
|
||||
<div className="px-2 h-6 bg-[#00BED7] rounded-full flex items-center justify-center">
|
||||
<p className="text-xs font-semibold text-white">
|
||||
{
|
||||
units.filter((unit) => unit.unitType === "Studio Squared")
|
||||
.length
|
||||
}
|
||||
{units.filter((unit) => unit.unitType === "Studio Squared").length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -497,18 +436,12 @@ function SearchPage() {
|
||||
<div className="flex items-center gap-3">
|
||||
<Checkbox2
|
||||
filterName="1 BR Squared"
|
||||
checked={unitTypeFilters.some(
|
||||
(unitTypeFilter) => unitTypeFilter === "1 BR Squared"
|
||||
)}
|
||||
checked={unitTypeFilters.some((unitTypeFilter) => unitTypeFilter === "1 BR Squared")}
|
||||
onChange={(isChecked, filterName) => {
|
||||
if (isChecked) {
|
||||
setUnitTypeFilters((prev) => [...prev, filterName]);
|
||||
} else {
|
||||
setUnitTypeFilters(
|
||||
unitTypeFilters.filter(
|
||||
(unitTypeFilter) => unitTypeFilter !== filterName
|
||||
)
|
||||
);
|
||||
setUnitTypeFilters(unitTypeFilters.filter((unitTypeFilter) => unitTypeFilter !== filterName));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@@ -516,10 +449,7 @@ function SearchPage() {
|
||||
</div>
|
||||
<div className="px-2 h-6 bg-[#00BED7] rounded-full flex items-center justify-center">
|
||||
<p className="text-xs font-semibold text-white">
|
||||
{
|
||||
units.filter((unit) => unit.unitType === "1 BR Squared")
|
||||
.length
|
||||
}
|
||||
{units.filter((unit) => unit.unitType === "1 BR Squared").length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -527,18 +457,12 @@ function SearchPage() {
|
||||
<div className="flex items-center gap-3">
|
||||
<Checkbox2
|
||||
filterName="2 BR Squared"
|
||||
checked={unitTypeFilters.some(
|
||||
(unitTypeFilter) => unitTypeFilter === "2 BR Squared"
|
||||
)}
|
||||
checked={unitTypeFilters.some((unitTypeFilter) => unitTypeFilter === "2 BR Squared")}
|
||||
onChange={(isChecked, filterName) => {
|
||||
if (isChecked) {
|
||||
setUnitTypeFilters((prev) => [...prev, filterName]);
|
||||
} else {
|
||||
setUnitTypeFilters(
|
||||
unitTypeFilters.filter(
|
||||
(unitTypeFilter) => unitTypeFilter !== filterName
|
||||
)
|
||||
);
|
||||
setUnitTypeFilters(unitTypeFilters.filter((unitTypeFilter) => unitTypeFilter !== filterName));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@@ -546,10 +470,7 @@ function SearchPage() {
|
||||
</div>
|
||||
<div className="px-2 h-6 bg-[#00BED7] rounded-full flex items-center justify-center">
|
||||
<p className="text-xs font-semibold text-white">
|
||||
{
|
||||
units.filter((unit) => unit.unitType === "2 BR Squared")
|
||||
.length
|
||||
}
|
||||
{units.filter((unit) => unit.unitType === "2 BR Squared").length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -615,9 +536,7 @@ function SearchPage() {
|
||||
max={maxTotalArea}
|
||||
onlyNumbers
|
||||
className="rounded-r-none"
|
||||
onChange={(value) =>
|
||||
setTotalArea([value as number, totalArea[1]])
|
||||
}
|
||||
onChange={(value) => setTotalArea([value as number, totalArea[1]])}
|
||||
/>
|
||||
<Input
|
||||
readOnly
|
||||
@@ -626,9 +545,7 @@ function SearchPage() {
|
||||
max={maxTotalArea}
|
||||
onlyNumbers
|
||||
className="text-right rounded-l-none"
|
||||
onChange={(value) =>
|
||||
setTotalArea([totalArea[0], value as number])
|
||||
}
|
||||
onChange={(value) => setTotalArea([totalArea[0], value as number])}
|
||||
/>
|
||||
</div>
|
||||
<div className="px-2 -mt-0.5">
|
||||
@@ -684,18 +601,12 @@ function SearchPage() {
|
||||
<div className="flex items-center gap-3">
|
||||
<Checkbox2
|
||||
filterName="BK/DT"
|
||||
checked={unitViewFilters.some(
|
||||
(unitViewFilter) => unitViewFilter === "BK/DT"
|
||||
)}
|
||||
checked={unitViewFilters.some((unitViewFilter) => unitViewFilter === "BK/DT")}
|
||||
onChange={(isChecked, filterName) => {
|
||||
if (isChecked) {
|
||||
setUnitViewFilters((prev) => [...prev, filterName]);
|
||||
} else {
|
||||
setUnitViewFilters(
|
||||
unitViewFilters.filter(
|
||||
(unitViewFilter) => unitViewFilter !== filterName
|
||||
)
|
||||
);
|
||||
setUnitViewFilters(unitViewFilters.filter((unitViewFilter) => unitViewFilter !== filterName));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@@ -703,10 +614,7 @@ function SearchPage() {
|
||||
</div>
|
||||
<div className="px-2 h-6 bg-[#00BED7] rounded-full flex items-center justify-center">
|
||||
<p className="text-xs font-semibold text-white">
|
||||
{
|
||||
units.filter((unit) => unit.unitView.includes("BK/DT"))
|
||||
.length
|
||||
}
|
||||
{units.filter((unit) => unit.unitView.includes("BK/DT")).length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -714,18 +622,12 @@ function SearchPage() {
|
||||
<div className="flex items-center gap-3">
|
||||
<Checkbox2
|
||||
filterName="Business Bay"
|
||||
checked={unitViewFilters.some(
|
||||
(unitViewFilter) => unitViewFilter === "Business Bay"
|
||||
)}
|
||||
checked={unitViewFilters.some((unitViewFilter) => unitViewFilter === "Business Bay")}
|
||||
onChange={(isChecked, filterName) => {
|
||||
if (isChecked) {
|
||||
setUnitViewFilters((prev) => [...prev, filterName]);
|
||||
} else {
|
||||
setUnitViewFilters(
|
||||
unitViewFilters.filter(
|
||||
(unitViewFilter) => unitViewFilter !== filterName
|
||||
)
|
||||
);
|
||||
setUnitViewFilters(unitViewFilters.filter((unitViewFilter) => unitViewFilter !== filterName));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@@ -733,10 +635,7 @@ function SearchPage() {
|
||||
</div>
|
||||
<div className="px-2 h-6 bg-[#00BED7] rounded-full flex items-center justify-center">
|
||||
<p className="text-xs font-semibold text-white">
|
||||
{
|
||||
units.filter((unit) => unit.unitView === "Business Bay")
|
||||
.length
|
||||
}
|
||||
{units.filter((unit) => unit.unitView === "Business Bay").length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -744,18 +643,12 @@ function SearchPage() {
|
||||
<div className="flex items-center gap-3">
|
||||
<Checkbox2
|
||||
filterName="Amenities"
|
||||
checked={unitViewFilters.some(
|
||||
(unitViewFilter) => unitViewFilter === "Amenities"
|
||||
)}
|
||||
checked={unitViewFilters.some((unitViewFilter) => unitViewFilter === "Amenities")}
|
||||
onChange={(isChecked, filterName) => {
|
||||
if (isChecked) {
|
||||
setUnitViewFilters((prev) => [...prev, filterName]);
|
||||
} else {
|
||||
setUnitViewFilters(
|
||||
unitViewFilters.filter(
|
||||
(unitViewFilter) => unitViewFilter !== filterName
|
||||
)
|
||||
);
|
||||
setUnitViewFilters(unitViewFilters.filter((unitViewFilter) => unitViewFilter !== filterName));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@@ -763,10 +656,7 @@ function SearchPage() {
|
||||
</div>
|
||||
<div className="px-2 h-6 bg-[#00BED7] rounded-full flex items-center justify-center">
|
||||
<p className="text-xs font-semibold text-white">
|
||||
{
|
||||
units.filter((unit) => unit.unitView.includes("Amenities"))
|
||||
.length
|
||||
}
|
||||
{units.filter((unit) => unit.unitView.includes("Amenities")).length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -774,18 +664,12 @@ function SearchPage() {
|
||||
<div className="flex items-center gap-3">
|
||||
<Checkbox2
|
||||
filterName="Canal"
|
||||
checked={unitViewFilters.some(
|
||||
(unitViewFilter) => unitViewFilter === "Canal"
|
||||
)}
|
||||
checked={unitViewFilters.some((unitViewFilter) => unitViewFilter === "Canal")}
|
||||
onChange={(isChecked, filterName) => {
|
||||
if (isChecked) {
|
||||
setUnitViewFilters((prev) => [...prev, filterName]);
|
||||
} else {
|
||||
setUnitViewFilters(
|
||||
unitViewFilters.filter(
|
||||
(unitViewFilter) => unitViewFilter !== filterName
|
||||
)
|
||||
);
|
||||
setUnitViewFilters(unitViewFilters.filter((unitViewFilter) => unitViewFilter !== filterName));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@@ -793,10 +677,7 @@ function SearchPage() {
|
||||
</div>
|
||||
<div className="px-2 h-6 bg-[#00BED7] rounded-full flex items-center justify-center">
|
||||
<p className="text-xs font-semibold text-white">
|
||||
{
|
||||
units.filter((unit) => unit.unitView.includes("Canal"))
|
||||
.length
|
||||
}
|
||||
{units.filter((unit) => unit.unitView.includes("Canal")).length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -804,18 +685,12 @@ function SearchPage() {
|
||||
<div className="flex items-center gap-3">
|
||||
<Checkbox2
|
||||
filterName="Park"
|
||||
checked={unitViewFilters.some(
|
||||
(unitViewFilter) => unitViewFilter === "Park"
|
||||
)}
|
||||
checked={unitViewFilters.some((unitViewFilter) => unitViewFilter === "Park")}
|
||||
onChange={(isChecked, filterName) => {
|
||||
if (isChecked) {
|
||||
setUnitViewFilters((prev) => [...prev, filterName]);
|
||||
} else {
|
||||
setUnitViewFilters(
|
||||
unitViewFilters.filter(
|
||||
(unitViewFilter) => unitViewFilter !== filterName
|
||||
)
|
||||
);
|
||||
setUnitViewFilters(unitViewFilters.filter((unitViewFilter) => unitViewFilter !== filterName));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@@ -823,10 +698,7 @@ function SearchPage() {
|
||||
</div>
|
||||
<div className="px-2 h-6 bg-[#00BED7] rounded-full flex items-center justify-center">
|
||||
<p className="text-xs font-semibold text-white">
|
||||
{
|
||||
units.filter((unit) => unit.unitView.includes("Park"))
|
||||
.length
|
||||
}
|
||||
{units.filter((unit) => unit.unitView.includes("Park")).length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -835,10 +707,7 @@ function SearchPage() {
|
||||
<div className="pb-2 space-y-6 lg:hidden">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#00BED7]">{filteredUnits.length} apartments found</p>
|
||||
<button
|
||||
className="flex items-center gap-2 py-3"
|
||||
onClick={refreshFilters}
|
||||
>
|
||||
<button className="flex items-center gap-2 py-3" onClick={refreshFilters}>
|
||||
<RestartIcon className="w-5 h-5" />
|
||||
Reset filters
|
||||
</button>
|
||||
@@ -852,8 +721,7 @@ function SearchPage() {
|
||||
<div className="space-y-6">
|
||||
<div className="flex max-lg:flex-col gap-6 justify-between pb-4 border-b border-[#E2E2DC]">
|
||||
<p className="text-xl font-semibold lg:text-2xl">
|
||||
<span className="text-[#0D1922]">Units</span>{" "}
|
||||
{filteredUnits.length}
|
||||
<span className="text-[#0D1922]">Units</span> {filteredUnits.length}
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
@@ -862,11 +730,7 @@ function SearchPage() {
|
||||
>
|
||||
<p className="text-sm">Sort by ascending price</p>
|
||||
{/* descending */}
|
||||
<ChevronDownIcon
|
||||
className={`w-5 h-5 transition-transform ${
|
||||
isSortPriceAsc ? "" : "rotate-180"
|
||||
}`}
|
||||
/>
|
||||
<ChevronDownIcon className={`w-5 h-5 transition-transform ${isSortPriceAsc ? "" : "rotate-180"}`} />
|
||||
</button>
|
||||
<Button3
|
||||
variant="secondary"
|
||||
@@ -880,17 +744,12 @@ function SearchPage() {
|
||||
</div>
|
||||
<div className="grid gap-4 2xl:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2">
|
||||
{filteredUnits.map((unit) => (
|
||||
<div
|
||||
key={unit.id}
|
||||
className="flex flex-col justify-between p-4 space-y-4 bg-white rounded-2xl"
|
||||
>
|
||||
<div key={unit.id} className="flex flex-col justify-between p-4 space-y-4 bg-white rounded-2xl">
|
||||
<div className="flex justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm text-[#00BED7]">{unit.projectName}</p>
|
||||
<div className="flex items-center gap-2 text-xs font-semibold">
|
||||
<p className="">
|
||||
{unit.unitNo[0] === "E" ? "East" : "West"} Wing
|
||||
</p>
|
||||
<p className="">{unit.unitNo[0] === "E" ? "East" : "West"} Wing</p>
|
||||
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
||||
<p>{unit.floor}</p>
|
||||
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
||||
@@ -901,36 +760,24 @@ function SearchPage() {
|
||||
className="w-10 h-10 flex items-center justify-center border border-[#E2E2DC] rounded-full bg-[#FFFFFF] bg-opacity-80 hover:text-[#0D1922] hover:bg-opacity-100 hover:border-[#00BED7] transition-all"
|
||||
onClick={() => addOrRemoveFromFavorites(unit)}
|
||||
>
|
||||
{favoriteUnits.some(
|
||||
(favoriteUnit) => favoriteUnit.id === unit.id
|
||||
) ? (
|
||||
{favoriteUnits.some((favoriteUnit) => favoriteUnit.id === unit.id) ? (
|
||||
<HeartFilledIcon className="w-5 h-5" />
|
||||
) : (
|
||||
<HeartIcon className="w-5 h-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="flex justify-center cursor-pointer"
|
||||
onClick={() => handleClickCard(unit)}
|
||||
>
|
||||
<img
|
||||
src={getImageSrc(unit.unitNo)}
|
||||
alt=""
|
||||
className="max-h-[240px] pointer-events-none"
|
||||
/>
|
||||
<div className="flex justify-center cursor-pointer" onClick={() => handleClickCard(unit)}>
|
||||
<img src={getImageSrc(unit.unitNo)} alt="" className="max-h-[240px] pointer-events-none" />
|
||||
</div>
|
||||
<div
|
||||
className="space-y-1 cursor-pointer"
|
||||
onClick={() => handleClickCard(unit)}
|
||||
>
|
||||
<div className="space-y-1 cursor-pointer" onClick={() => handleClickCard(unit)}>
|
||||
<p className="text-sm">
|
||||
{unit.unitName}, {unit.totalArea} Sqft
|
||||
</p>
|
||||
<p className="text-xl text-[#00BED7] font-semibold">
|
||||
{(unit.unitPrice &&
|
||||
`AED ${unit.unitPrice.toLocaleString()}`) ||
|
||||
"Unavailable"}
|
||||
{(unit.unitPrice && `AED ${unit.unitPrice.toLocaleString()}`) ||
|
||||
// "Unavailable"
|
||||
""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user