From 708ed301a925bb1e5dc957f71e69ecceba21620a Mon Sep 17 00:00:00 2001 From: inmake Date: Mon, 9 Sep 2024 18:36:36 +0500 Subject: [PATCH] upd --- client/src/components/ButtomPanel.tsx | 4 +- client/src/components/ButtomPanelCompass.tsx | 4 +- client/src/components/Footer2.tsx | 12 +- client/src/components/Header.tsx | 6 +- .../FloorSidebar/EastWingFloorPlan.tsx | 1292 ++++++++++++++++ .../FloorSidebar/FloorPlanSidebar.tsx | 35 +- .../FloorSidebar/WestWingFloorLayout.tsx | 31 +- .../FloorSidebar/WestWingFloorPlanLower.tsx | 1346 +++++++++++++++++ .../FloorSidebar/WestWingFloorPlanUpper.tsx | 1306 ++++++++++++++++ client/src/components/icons/FiltersIcon.tsx | 41 +- .../src/components/masterplanPage/map/Map.tsx | 2 +- .../components/masterplanPage/map/Marker.tsx | 5 +- .../masterplanPage/map/WeatherWidget.tsx | 4 +- .../masterplanPage/map/ZoomControlls.tsx | 2 +- client/src/components/modals/NavbarModal.tsx | 30 +- client/src/components/modals/UnitModal.tsx | 206 +-- .../ButtomPanelCompassVirualTour.tsx | 4 +- client/src/pages/ComplexWingPage.tsx | 556 ++++++- client/src/pages/SearchPage.tsx | 402 ++--- client/src/pages/Test2Page.tsx | 146 ++ 20 files changed, 5065 insertions(+), 369 deletions(-) create mode 100644 client/src/components/complexWingPage/FloorSidebar/EastWingFloorPlan.tsx create mode 100644 client/src/components/complexWingPage/FloorSidebar/WestWingFloorPlanLower.tsx create mode 100644 client/src/components/complexWingPage/FloorSidebar/WestWingFloorPlanUpper.tsx diff --git a/client/src/components/ButtomPanel.tsx b/client/src/components/ButtomPanel.tsx index 858b032..1ff0e1f 100644 --- a/client/src/components/ButtomPanel.tsx +++ b/client/src/components/ButtomPanel.tsx @@ -9,7 +9,7 @@ const ButtomPanel = () => { setModal(); }; return ( -
+
-
+
compass
diff --git a/client/src/components/ButtomPanelCompass.tsx b/client/src/components/ButtomPanelCompass.tsx index f185564..ae7a38f 100644 --- a/client/src/components/ButtomPanelCompass.tsx +++ b/client/src/components/ButtomPanelCompass.tsx @@ -13,7 +13,7 @@ const ButtomPanelCompass = () => { }; return ( -
+
-
+
-
+
+
-
-
-
+
+
+

For more information, visit our
@@ -66,7 +66,7 @@ function Footer2() {

-
+
Privacy Policy diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx index 4f4ab1d..bf744a2 100644 --- a/client/src/components/Header.tsx +++ b/client/src/components/Header.tsx @@ -25,7 +25,7 @@ function Header() { } return ( -
+
@@ -48,7 +48,7 @@ function Header() { About IRTH
- + Favorites{" "} {favoriteUnits.length > 0 && (
@@ -66,7 +66,7 @@ function Header() {
-
+
) => void; + onMouseLeave: () => void; + onClick: (e: React.MouseEvent) => void; +} + +function EastWingFloorPlan({ onMouseEnter, onMouseLeave, onClick }: Props) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default EastWingFloorPlan; diff --git a/client/src/components/complexWingPage/FloorSidebar/FloorPlanSidebar.tsx b/client/src/components/complexWingPage/FloorSidebar/FloorPlanSidebar.tsx index 8f61fba..2df5628 100644 --- a/client/src/components/complexWingPage/FloorSidebar/FloorPlanSidebar.tsx +++ b/client/src/components/complexWingPage/FloorSidebar/FloorPlanSidebar.tsx @@ -1,15 +1,16 @@ -import React, { useState } from "react"; +/* eslint-disable react-hooks/exhaustive-deps */ +import React, { useEffect, useState } from "react"; import IUnit from "../../../types/IUnit"; import Button3 from "../../Button3"; import CloseIcon from "../../icons/CloseIcon"; -import EastWingFloorLayout from "./EastWingFloorLayout"; import UnitPopup from "./UnitPopup"; -import WestWingBottomFloorLayout from "./WestWingBottomFloorLayout"; -import WestWingFloorLayout from "./WestWingFloorLayout"; import api from "../../../utils/api"; import useModal from "../../../store/useModal"; import UnitModal from "../../modals/UnitModal"; import { isMobile } from "react-device-detect"; +import WestWingFloorPlanLower from "./WestWingFloorPlanLower"; +import WestWingFloorPlanUpper from "./WestWingFloorPlanUpper"; +import EastWingFloorPlan from "./EastWingFloorPlan"; interface Props { floor: number; @@ -71,8 +72,14 @@ function FloorPlanSidebar({ floor, wing, onClose }: Props) { } } + useEffect(() => { + if (!isMobile || !hoveredUnit || !type) return; + + setModal(); + }, [hoveredUnit]); + return ( -
+

-
-
+
+
@@ -110,28 +117,28 @@ function FloorPlanSidebar({ floor, wing, onClose }: Props) {

2 Bedroom²

-
+ {/*
0 units -
+
*/}
-
- +
+ {wing === "West" ? ( floor <= 21 ? ( - ) : ( - ) ) : ( - @@ -1268,7 +1267,7 @@ function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fillRule: "evenodd", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1281,7 +1280,7 @@ function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1294,7 +1293,7 @@ function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1307,7 +1306,7 @@ function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1320,7 +1319,7 @@ function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1333,7 +1332,7 @@ function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1347,7 +1346,7 @@ function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fillRule: "evenodd", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1361,7 +1360,7 @@ function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fillRule: "evenodd", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1374,7 +1373,7 @@ function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1387,7 +1386,7 @@ function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1400,7 +1399,7 @@ function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1413,7 +1412,7 @@ function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1426,7 +1425,7 @@ function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1439,7 +1438,7 @@ function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} @@ -1452,7 +1451,7 @@ function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { fill: "rgba(255, 255, 255, 0)", strokeWidth: 0, }} - className="cursor-pointer transition-colors" + className="transition-colors cursor-pointer" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} diff --git a/client/src/components/complexWingPage/FloorSidebar/WestWingFloorPlanLower.tsx b/client/src/components/complexWingPage/FloorSidebar/WestWingFloorPlanLower.tsx new file mode 100644 index 0000000..e56a03c --- /dev/null +++ b/client/src/components/complexWingPage/FloorSidebar/WestWingFloorPlanLower.tsx @@ -0,0 +1,1346 @@ +interface Props { + onMouseEnter: (e: React.MouseEvent) => void; + onMouseLeave: () => void; + onClick: (e: React.MouseEvent) => void; +} + +function WestWingFloorPlanLower({ + onMouseEnter, + onMouseLeave, + onClick, +}: Props) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default WestWingFloorPlanLower; diff --git a/client/src/components/complexWingPage/FloorSidebar/WestWingFloorPlanUpper.tsx b/client/src/components/complexWingPage/FloorSidebar/WestWingFloorPlanUpper.tsx new file mode 100644 index 0000000..f51ee71 --- /dev/null +++ b/client/src/components/complexWingPage/FloorSidebar/WestWingFloorPlanUpper.tsx @@ -0,0 +1,1306 @@ +interface Props { + onMouseEnter: (e: React.MouseEvent) => void; + onMouseLeave: () => void; + onClick: (e: React.MouseEvent) => void; +} + +function WestWingFloorPlanUpper({ + onMouseEnter, + onMouseLeave, + onClick, +}: Props) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default WestWingFloorPlanUpper; diff --git a/client/src/components/icons/FiltersIcon.tsx b/client/src/components/icons/FiltersIcon.tsx index 210ec2e..7c496d2 100644 --- a/client/src/components/icons/FiltersIcon.tsx +++ b/client/src/components/icons/FiltersIcon.tsx @@ -1,44 +1,31 @@ -const FiltersIcon = () => { +interface Props { + className?: string; +} + +function FiltersIcon({ className = "" }: Props) { return ( - - - ); -}; +} export default FiltersIcon; diff --git a/client/src/components/masterplanPage/map/Map.tsx b/client/src/components/masterplanPage/map/Map.tsx index 8c0f545..acdb462 100644 --- a/client/src/components/masterplanPage/map/Map.tsx +++ b/client/src/components/masterplanPage/map/Map.tsx @@ -34,7 +34,7 @@ const Map = () => { }} > - + {!isMobile && } { const { setHoveredMarker, hoveredMarker } = useMarker(); @@ -24,7 +25,9 @@ const Marker = (props: MarkerComponentProps) => { const handleOnClick = () => { if (!currentMarker || currentMarker?.isDisabled) return; - navigate(`../masterplan/${currentMarker?.itemNumber}`); + navigate( + `../masterplan/${currentMarker?.itemNumber}${isMobile ? "/wing" : ""}` + ); setHoveredMarker(null); }; diff --git a/client/src/components/masterplanPage/map/WeatherWidget.tsx b/client/src/components/masterplanPage/map/WeatherWidget.tsx index ce12e00..73cb930 100644 --- a/client/src/components/masterplanPage/map/WeatherWidget.tsx +++ b/client/src/components/masterplanPage/map/WeatherWidget.tsx @@ -25,7 +25,7 @@ const WeatherWidget = () => { }, []); return ( -
+

{day}

{formattedTime}

@@ -36,7 +36,7 @@ const WeatherWidget = () => {

{dayPart}

-
+

{temperature}°C

diff --git a/client/src/components/masterplanPage/map/ZoomControlls.tsx b/client/src/components/masterplanPage/map/ZoomControlls.tsx index 474465d..28012be 100644 --- a/client/src/components/masterplanPage/map/ZoomControlls.tsx +++ b/client/src/components/masterplanPage/map/ZoomControlls.tsx @@ -14,7 +14,7 @@ const ZoomControlls = () => { }; return ( -
+
-
+
*/}
-
-
- +
+
+ +
-
+

View from window

{getViewText()}

-
-
-

- {unit.unitName}, {unit.totalArea} Sqft -

-
-

- Rove Home Marasi Drive +

+
+
+

+ {unit.unitName}, {unit.totalArea} Sqft

-
-

{unit.unitNo[0] === "E" ? "East" : "West"} Wing

-
-

Floor {unit.floor}

-
-

{unit.unitNo}

+
+

+ Rove Home Marasi Drive +

+
+

{unit.unitNo[0] === "E" ? "East" : "West"} Wing

+
+

Floor {unit.floor}

+
+

{unit.unitNo}

+
+
+
+

Total Area

+

{unit.totalArea} Sqft

+
+
+

Suite Area

+

{unit.suiteArea} Sqft

+
+
+

Balcony Area

+

{unit.balconyArea} Sqft

+
+
+

Status

+

{unit.propertyStatus}

+
+
+

Parking Space

+

{unit.parkingSpaces}

+
+
+

+ {unit.unitPrice ? ( + <> + AED{" "} + {new Intl.NumberFormat("ar-AE", { + currency: "AED", + }) + .format(unit.unitPrice) + .replaceAll(",", " ")} + + ) : ( + "Unavailable" + )} +

-
-
-

Total Area

-

{unit.totalArea} Sqft

-
-
-

Suite Area

-

{unit.suiteArea} Sqft

-
-
-

Balcony Area

-

{unit.balconyArea} Sqft

-
-
-

Status

-

{unit.propertyStatus}

-
-
-

Parking Space

-

{unit.parkingSpaces}

-
-
-

- {unit.unitPrice ? ( - <> - AED{" "} - {new Intl.NumberFormat("ar-AE", { - currency: "AED", - }) - .format(unit.unitPrice) - .replaceAll(",", " ")} - - ) : ( - "Unavailable" +

+ {unitTypes.find((unitType) => unitType.type === type) + ?.tourAvailable && ( +
-
- {unitTypes.find((unitType) => unitType.type === type) - ?.tourAvailable && (
-
-
-
+
+
+
-

+

{ unitTypes.find((unitType) => unitType.type === type) ?.title }

-

+

{unitTypes.find((unitType) => unitType.type === type)?.desc}

-
-

+

+

{ unitTypes.find((unitType) => unitType.type === type) ?.texts[0] }

-

+

{ unitTypes.find((unitType) => unitType.type === type) ?.texts[1] @@ -395,24 +397,44 @@ function UnitModal({ unit, type }: Props) {

-
-

+

+

Up to{" "} {unitTypes.find((unitType) => unitType.type === type)?.sqft}{" "} Sqft

-

+

+ {unit.unitPrice && ( + <> + from AED{" "} + {new Intl.NumberFormat("ar-AE", { + currency: "AED", + }) + .format(unit.unitPrice) + .replaceAll(",", " ")} + + )} +

-
+
unitType.type === type) ?.imageDesc } alt="" - className="max-h-[644px] rounded-2xl pointer-events-none" + className="lg:max-h-[644px] h-full rounded-2xl pointer-events-none object-cover max-sm:aspect-square" /> + {/*
unitType.type === type) + ?.imageDesc + }')`, + }} + >
*/}
diff --git a/client/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx b/client/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx index ad50ade..1e232cd 100644 --- a/client/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx +++ b/client/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx @@ -13,7 +13,7 @@ const ButtomPanelCompassVirtualTour = () => { }; return ( -
+
-
+
(null); + const [imageWidth, setImageWidth] = useState(0); + const [imageHeight, setImageHeight] = useState(0); + const [scaled, setScaled] = useState(false); + const [selectedWing, setSelectedWing] = useState(); + const [mousePos, setMousePos] = useState<[number, number]>([0, 0]); + const [showPopup, setShowPopup] = useState(false); + const [selectedFloorPath, setSelectedFloorPath] = useState(); + const [hoveredFloor, setHoveredFloor] = useState(); + const navigate = useNavigate(); + const [hoveredWing, setHoveredWing] = useState(); + const [selectedIndex] = useState(0); + const [selectedFloor, setSelectedFloor] = useState(); + // const [showFloorPlanSidebar, setShowFloorPlanSidebar] = useState(false); + + function handleResize() { + if (window.innerHeight > window.innerWidth) { + setScaled(true); + } else { + setScaled(false); + } + } + + function handleMouseMove(e: React.MouseEvent) { + const x = e.clientX - e.currentTarget.getBoundingClientRect().left; + const y = e.clientY - e.currentTarget.getBoundingClientRect().top; + + setMousePos([x, y]); + } + + function handleMouseEnter(e: React.MouseEvent) { + if (!e.currentTarget.dataset["wing"]) return; + + setSelectedFloorPath(e.currentTarget); + setHoveredWing(e.currentTarget.dataset["wing"]); + setShowPopup(true); + } + + function handleMouseLeave() { + setShowPopup(false); + } + + function handleClick(e: React.MouseEvent) { + setSelectedWing(e.currentTarget.dataset["wing"]); + setSelectedFloor(e.currentTarget.dataset["floor"]); + } + + // function prev() { + // if (selectedIndex === 0) return; + // setSelectedIndex((prev) => prev - 1); + // } + + // function next() { + // if (selectedIndex === floors.length - 1) return; + // setSelectedIndex((prev) => prev + 1); + // } + + function handleLoadedData() { + setImageWidth(ref.current!.naturalWidth); + setImageHeight(ref.current!.naturalHeight); + } + + useEffect(() => { + handleResize(); + + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + + useEffect(() => { + setHoveredFloor(floors[selectedIndex]); + }, [selectedIndex]); + return ( -
- - - +
+
+ +
+
+
+

+ {selectedFloorPath?.dataset["name"] === "Sky Garden" + ? selectedFloorPath?.dataset["name"] + : `${selectedFloorPath?.dataset["floor"]} floor`} +

+

+ {selectedFloorPath?.dataset["name"] !== "Sky Garden" && + `${selectedFloorPath?.dataset["wing"]} Wing`} +

+
+
+

0 units

+
+
+ {selectedFloorPath?.dataset["name"] !== "Sky Garden" ? ( +
+
+
+
+

+ 0 +

+
+

Studio Flex

+
+ +
+
+

+ 0 +

+
+

Studio²

+
+
+ +
+
+
+

+ 0 +

+
+

1 Bedroom²

+
+ +
+
+

+ 0 +

+
+

2 Bedroom²

+
+
+
+ ) : ( +
+
+
+

+ 0 +

+
+

Indoor

+
+
+
+

+ 0 +

+
+

Outdoor

+
+
+ )} +
+ +
+
+
+ } + onlyIcon + onClick={() => navigate("..")} + /> + } + onClick={() => navigate("/about-projects")} + > + About Projects + +
+
+
+ +
+
+ handleLoadedData()} + /> + + + {!isMobile ? ( + paths.map((path, index) => ( + + )) + ) : ( + <> + + {paths + .filter((path) => path["data-wing"] === selectedWing) + .map((path, index) => ( + + ))} + + + setSelectedWing("East")} + /> + setSelectedWing("West")} + /> + + + )} + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+
+
+
+ {floors.map((floor) => ( + setHoveredFloor(floor)} + /> + ))} +
+
+
+ } + onlyIcon + className="ring-0 w-9 h-9" + /> + } + onlyIcon + className="ring-0 w-9 h-9" + /> +
+
+ +
+ } + className="w-full" + onClick={() => setSelectedWing(undefined)} + > + Back + + } + className="flex-row-reverse w-full" + onClick={() => setSelectedFloor(hoveredFloor)} + > + Explore + +
+
+
+ + + {(state) => ( +
+ setSelectedFloor(undefined)} + /> +
+ )} + + + {/* */} + + {modal}
); } diff --git a/client/src/pages/SearchPage.tsx b/client/src/pages/SearchPage.tsx index 645caaa..260fb84 100644 --- a/client/src/pages/SearchPage.tsx +++ b/client/src/pages/SearchPage.tsx @@ -14,6 +14,10 @@ import UnitModalForSearchPage from "../components/modals/UnitModalForSearchPage" import useFavoritesStore from "../store/useFavoritesStore"; import HeartFilledIcon from "../components/icons/HeartFilledIcon"; import { useSearchParams } from "react-router-dom"; +import { isMobile } from "react-device-detect"; +import CloseIcon from "../components/icons/CloseIcon"; +import FiltersIcon from "../components/icons/FiltersIcon"; +import Button3 from "../components/Button3"; function SearchPage() { const [units, setUnits] = useState([]); @@ -36,6 +40,7 @@ function SearchPage() { const { setModal } = useModal(); const { favoriteUnits, setFavoriteUnits } = useFavoritesStore(); const [searchParams, setSearchParams] = useSearchParams(); + const [showFilters, setShowFilters] = useState(false); async function getUnits() { try { @@ -169,7 +174,6 @@ function SearchPage() { } function refreshFilters() { - console.log("call func refreshFilters"); setUnitTypeFilters([]); setUnitViewFilters([]); setCost([minCost, maxCost]); @@ -379,6 +383,10 @@ function SearchPage() { useEffect(() => { getUnits(); + + if (!isMobile) { + setShowFilters(true); + } }, []); useEffect(() => { @@ -397,22 +405,36 @@ function SearchPage() { }, [units]); return ( -
-
-
-

Filters

- +
+
+
+

+ Filters +

+
+ + +
-
-

Apartment type

-
-
-
+
+

Apartment type

+
+
+
-

Studio Flex

+

Studio Flex

-

+

{ units.filter((unit) => unit.unitType === "Studio Flex") .length @@ -441,8 +463,8 @@ function SearchPage() {

-
-
+
+
-

Studio²

+

Studio²

-

+

{ units.filter((unit) => unit.unitType === "Studio Squared") .length @@ -471,8 +493,8 @@ function SearchPage() {

-
-
+
+
-

1 Bedroom²

+

1 Bedroom²

-

+

{ units.filter((unit) => unit.unitType === "1 BR Squared") .length @@ -501,8 +523,8 @@ function SearchPage() {

-
-
+
+
-

2 Bedroom²

+

2 Bedroom²

-

+

{ units.filter((unit) => unit.unitType === "2 BR Squared") .length @@ -533,131 +555,133 @@ function SearchPage() {

-
-
-

Cost

-

AED

-
-
-
- setCost([value as number, cost[1]])} - /> - setCost([cost[0], value as number])} - /> +
+
+
+

Cost

+

AED

-
- setCost(value)} - disabled - /> +
+
+ setCost([value as number, cost[1]])} + /> + setCost([cost[0], value as number])} + /> +
+
+ setCost(value)} + disabled + /> +
+
+
+
+
+

Total Area

+

Sqft

+
+
+
+ + setTotalArea([value as number, totalArea[1]]) + } + /> + + setTotalArea([totalArea[0], value as number]) + } + /> +
+
+ setTotalArea(value)} + /> +
+
+
+
+
+

Floor

+
+
+
+ setFloor([value as number, floor[1]])} + /> + setFloor([floor[0], value as number])} + /> +
+
+ setFloor(value)} + /> +
-
-
-

Total Area

-

Sqft

-
-
-
- - setTotalArea([value as number, totalArea[1]]) - } - /> - - setTotalArea([totalArea[0], value as number]) - } - /> -
-
- setTotalArea(value)} - /> -
-
-
-
-
-

Floor

-
-
-
- setFloor([value as number, floor[1]])} - /> - setFloor([floor[0], value as number])} - /> -
-
- setFloor(value)} - /> -
-
-
-
-

View

-
-
-
+
+

View

+
+
+
-

Burj Khalifa / Downtown

+

Burj Khalifa / Downtown

-

+

{ units.filter((unit) => unit.unitView.includes("BK/DT")) .length @@ -686,8 +710,8 @@ function SearchPage() {

-
-
+
+
-

Business Bay

+

Business Bay

-

+

{ units.filter((unit) => unit.unitView === "Business Bay") .length @@ -716,8 +740,8 @@ function SearchPage() {

-
-
+
+
-

Amenities

+

Amenities

-

+

{ units.filter((unit) => unit.unitView.includes("Amenities")) .length @@ -746,8 +770,8 @@ function SearchPage() {

-
-
+
+
-

Canal

+

Canal

-

+

{ units.filter((unit) => unit.unitView.includes("Canal")) .length @@ -776,8 +800,8 @@ function SearchPage() {

-
-
+
+
-

Park

+

Park

-

+

{ units.filter((unit) => unit.unitView.includes("Park")) .length @@ -809,31 +833,41 @@ function SearchPage() {

-
+
-
+

Units{" "} {filteredUnits.length}

- + } + onlyIcon + className="lg:hidden" + onClick={() => setShowFilters(true)} /> - +
-
+
{filteredUnits.map((unit) => (
diff --git a/client/src/pages/Test2Page.tsx b/client/src/pages/Test2Page.tsx index dfc0c77..60adff0 100644 --- a/client/src/pages/Test2Page.tsx +++ b/client/src/pages/Test2Page.tsx @@ -317,6 +317,152 @@ function Test2Page() { )} + + + + + + + + + + + + + + + + + + + + + + + + + +