From e15c988feae665412ec35522c414ab5a0c44a645 Mon Sep 17 00:00:00 2001 From: Lanskikh Date: Fri, 23 May 2025 17:13:53 +0500 Subject: [PATCH] upd --- src/components/FloorPopup.tsx | 1 + src/components/FloorSelect.tsx | 16 +- src/components/Header.tsx | 2 +- src/components/Map.tsx | 4 +- src/components/NewSelectedComplexCard.tsx | 90 --------- src/components/SearchFilters.tsx | 18 +- src/components/SelectedComplexCard.tsx | 134 +++++++------ src/components/SequenceSlider.tsx | 6 +- src/components/ui/MultiRangeSlider.tsx | 9 +- src/layout/LayoutWithoutFooter.tsx | 2 +- src/pages/AboutComplexPage.tsx | 223 +++++++++++----------- 11 files changed, 232 insertions(+), 273 deletions(-) delete mode 100644 src/components/NewSelectedComplexCard.tsx diff --git a/src/components/FloorPopup.tsx b/src/components/FloorPopup.tsx index ad298ce..641ebed 100644 --- a/src/components/FloorPopup.tsx +++ b/src/components/FloorPopup.tsx @@ -15,6 +15,7 @@ function FloorPopup({ title, position }: FloorMarkerProps) { initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} + transition={{ duration: 0.1 }} style={{ top: position[1], left: position[0] }} className="absolute z-100 2xl:rounded-[1.111vw] 2xl:p-[1.111vw] p-4 rounded-2xl flex flex-col 2xl:gap-[1.111vw] bg-white transition-opacity duration-300 -translate-x-[calc(100%+1.25vw)] -translate-y-1/2 2xl:w-[17.222vw] md:max-2xl:w-70 w-screen" > diff --git a/src/components/FloorSelect.tsx b/src/components/FloorSelect.tsx index 62b0efd..cd84e50 100644 --- a/src/components/FloorSelect.tsx +++ b/src/components/FloorSelect.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { markers } from "../data/markers"; import { floorsMasks } from "../data/masks"; import Compass from "./Compass"; @@ -10,6 +10,8 @@ import PrivacyPolicyButton from "./PrivacyPolicyButton"; import Button from "./ui/Button"; import { useNavigate } from "react-router"; import FloorPopup from "./FloorPopup"; +import { useQuery } from "@tanstack/react-query"; +import { api } from "../api/ky"; function FloorSelect({ complexName }: { complexName: string }) { const navigate = useNavigate(); @@ -37,6 +39,18 @@ function FloorSelect({ complexName }: { complexName: string }) { } } + const { data } = useQuery({ + queryKey: ["floors-data", complexName], + queryFn: () => + api + .get(`units/get-floors-data/${complexName}`) + .json<({ floor: number } & Record)[]>(), + }); + + useEffect(() => { + console.log(data); + }, [data]); + return (
-
+
{isMobile && hoveredMarker && ( - setHoveredMarker(null)} marker={hoveredMarker} /> diff --git a/src/components/NewSelectedComplexCard.tsx b/src/components/NewSelectedComplexCard.tsx deleted file mode 100644 index 5e68285..0000000 --- a/src/components/NewSelectedComplexCard.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { motion } from "motion/react"; -import HumanIcon from "./icons/HumanIcon"; -import Button from "./ui/Button"; -import ArrowRightIcon from "./icons/ArrowRightIcon"; -import CloseIcon from "./icons/CloseIcon"; -import { useQuery } from "@tanstack/react-query"; -import { api } from "../api/ky"; -import IMarker from "../types/IMarker"; -import { formattedUnitTypes } from "../data/formattedUnitTypes"; -import { useNavigate } from "react-router"; - -function NewSelectedComplexCard({ - marker, - onClose, -}: { - marker: IMarker; - onClose: () => void; -}) { - const { data: unitTypes } = useQuery({ - queryKey: ["filters", "unitTypes", marker.title], - queryFn: () => - api - .get(`units/filters/unitTypes?project=Rove Home ${marker.title}`) - .json(), - }); - - const navigate = useNavigate(); - - return ( - -
-
- -
-

{marker.title}

-
-
-

# Apartments

-
-
- - - -

Virtual Tour

-
-
-
-
-
- {unitTypes?.map((unitType) => ( -
-
- 4 -
-

- {formattedUnitTypes.get(unitType)} -

-
- ))} -
- -
- - ); -} - -export default NewSelectedComplexCard; diff --git a/src/components/SearchFilters.tsx b/src/components/SearchFilters.tsx index 538e591..5aff046 100644 --- a/src/components/SearchFilters.tsx +++ b/src/components/SearchFilters.tsx @@ -260,6 +260,18 @@ function SearchFilters({ setView(view); } + function handleSelectCost(newCostRange: [number, number]) { + setCost(newCostRange); + } + + function handleSelectFloor(newFloorRange: [number, number]) { + setFloor(newFloorRange); + } + + function handleSelectArea(newAreaRange: [number, number]) { + setArea(newAreaRange); + } + function resetFilters() { setView("Any view"); setSelectedUnitTypes([]); @@ -372,7 +384,7 @@ function SearchFilters({ currentMin={cost[0] === -1 ? allCost.min : cost[0]} currentMax={cost[1] === -1 ? allCost.max : cost[1]} offset={0} - onChange={setCost} + onChange={handleSelectCost} label="Cost, AED" /> @@ -391,7 +403,7 @@ function SearchFilters({ currentMin={floor[0] === -1 ? allFloors.min : floor[0]} currentMax={floor[1] === -1 ? allFloors.max : floor[1]} offset={0} - onChange={setFloor} + onChange={handleSelectFloor} label="Floor" /> @@ -410,7 +422,7 @@ function SearchFilters({ currentMin={area[0] === -1 ? allArea.min : area[0]} currentMax={area[1] === -1 ? allArea.max : area[1]} offset={0} - onChange={setArea} + onChange={handleSelectArea} label="Total Area, Sqft" /> diff --git a/src/components/SelectedComplexCard.tsx b/src/components/SelectedComplexCard.tsx index 9cd4677..0c022bc 100644 --- a/src/components/SelectedComplexCard.tsx +++ b/src/components/SelectedComplexCard.tsx @@ -1,80 +1,90 @@ -import { useNavigate } from "react-router"; -import ArrowRightIcon from "./icons/ArrowRightIcon"; -import Button from "./ui/Button"; import { motion } from "motion/react"; -import IMarker from "../types/IMarker"; -import { useEffect, useState } from "react"; -import clsx from "clsx"; +import HumanIcon from "./icons/HumanIcon"; +import Button from "./ui/Button"; +import ArrowRightIcon from "./icons/ArrowRightIcon"; +import CloseIcon from "./icons/CloseIcon"; import { useQuery } from "@tanstack/react-query"; import { api } from "../api/ky"; +import IMarker from "../types/IMarker"; +import { formattedUnitTypes } from "../data/formattedUnitTypes"; +import { useNavigate } from "react-router"; -export default function SelectedComplexCard({ marker }: { marker: IMarker }) { - const navigate = useNavigate(); - - const [isImageLoaded, setIsImageLoaded] = useState(false); - - useEffect(() => setIsImageLoaded(false), [marker]); - - const { data: count } = useQuery({ - queryKey: ["units", "count", `Rove Home ${marker.title}`], +function SelectedComplexCard({ + marker, + onClose, +}: { + marker: IMarker; + onClose: () => void; +}) { + const { data: unitTypes } = useQuery({ + queryKey: ["filters", "unitTypes", marker.title], queryFn: () => - api.get(`units/count?project=Rove Home ${marker.title}`).json(), + api + .get(`units/filters/unitTypes?project=Rove Home ${marker.title}`) + .json(), }); + const navigate = useNavigate(); + return ( -
-
- {marker.title} setIsImageLoaded(true)} - /> -
-

Loading...

+
+
+ +
+

{marker.title}

+
+
+

# Apartments

+
+
+ + + +

Virtual Tour

+
-
-
-

- Rove Home -
- {marker.title} -

-

- {count} units -

-
- +
+
+ {unitTypes?.map((unitType) => ( +
+
+ 4 +
+

+ {formattedUnitTypes.get(unitType)} +

+
+ ))}
+
); } + +export default SelectedComplexCard; diff --git a/src/components/SequenceSlider.tsx b/src/components/SequenceSlider.tsx index a6a23e2..c747352 100644 --- a/src/components/SequenceSlider.tsx +++ b/src/components/SequenceSlider.tsx @@ -181,7 +181,11 @@ function SequenceSlider({ complexName }: SequenceSliderProps) { ] }`} className="fill-[#00BED7] cursor-pointer transition-opacity duration-300 opacity-0 hover:opacity-40" - onClick={() => navigate("floors")} + onClick={() => { + if (complexName !== "dubai-marina") { + navigate("floors"); + } + }} /> )} diff --git a/src/components/ui/MultiRangeSlider.tsx b/src/components/ui/MultiRangeSlider.tsx index a9ef34e..4817a59 100644 --- a/src/components/ui/MultiRangeSlider.tsx +++ b/src/components/ui/MultiRangeSlider.tsx @@ -45,7 +45,14 @@ function MultiRangeSlider({ : Math.min(Math.max(newValue, currentMin + offset), max); } - const [value, setValue] = useState<[number, number]>([min, max]); + const [value, setValue] = useState<[number, number]>([ + currentMin, + currentMax, + ]); + + useEffect(() => { + setValue([currentMin, currentMax]); + }, [currentMin, currentMax]); function handleChange( e: MouseEvent | TouchEvent | ReactMouseEvent | ReactTouchEvent diff --git a/src/layout/LayoutWithoutFooter.tsx b/src/layout/LayoutWithoutFooter.tsx index 3ec87d9..52f9efc 100644 --- a/src/layout/LayoutWithoutFooter.tsx +++ b/src/layout/LayoutWithoutFooter.tsx @@ -5,7 +5,7 @@ function LayoutWithoutFooter() { return (
-
+
diff --git a/src/pages/AboutComplexPage.tsx b/src/pages/AboutComplexPage.tsx index 38bfe5c..1f0a389 100644 --- a/src/pages/AboutComplexPage.tsx +++ b/src/pages/AboutComplexPage.tsx @@ -4,23 +4,23 @@ import { motion, useInView, AnimatePresence, -} from 'motion/react'; -import { useRef, useState } from 'react'; +} from "motion/react"; +import { useRef, useState } from "react"; import { dubaiMarinaFeatures, dubaiMarinaDescription, roveHomeDescription, dubaiMarinaSlider, sliderBadgesCategory, -} from '../data/aboutDubaiMarina'; -import EqualIcon from '../components/icons/EqualIcon'; -import TextBox from '../components/ui/TextBox'; -import clsx from 'clsx'; -import Slider from '../components/Slider'; -import PlusIcon from '../components/icons/map/PlusIcon'; -import useWindowSize from '../hooks/useWindowSize'; -import FullScreenButton from '../components/FullScreenButton'; -import SliderMobile from '../components/SliderMobile'; +} from "../data/aboutDubaiMarina"; +import EqualIcon from "../components/icons/EqualIcon"; +import TextBox from "../components/ui/TextBox"; +import clsx from "clsx"; +import Slider from "../components/Slider"; +import PlusIcon from "../components/icons/map/PlusIcon"; +import useWindowSize from "../hooks/useWindowSize"; +import FullScreenButton from "../components/FullScreenButton"; +import SliderMobile from "../components/SliderMobile"; function AboutComplexPage() { const containerRef = useRef(null); @@ -29,11 +29,11 @@ function AboutComplexPage() { const { width } = useWindowSize(); const [selectedCategorySlider, setSelectedCategorySlider] = - useState('Wellness'); + useState("Wellness"); const { scrollYProgress } = useScroll({ target: containerRef, - offset: ['start start', 'end start'], + offset: ["start start", "end start"], }); const firstSectionOpacity = useTransform(scrollYProgress, [0, 0.2], [1, 0]); @@ -41,7 +41,7 @@ function AboutComplexPage() { const secondSectionY = useTransform( scrollYProgress, [0, 0.4], - ['100dvh', '0dvh'] + ["100dvh", "0dvh"] ); const isSliderInView = useInView(sliderRef, { @@ -54,44 +54,44 @@ function AboutComplexPage() { }); return ( -
+
768 ? firstSectionOpacity : 1, }} > -
+
dubai marina about dubai marina about
-
-
-

+
+
+

{`Rove Home Dubai Marina`}

-
+
{roveHomeDescription.map((description) => ( - + ))}
-
-

+
+

{`Own the last slice of Dubai Marina, ROVE Style`}

-

+

{`With an extended playlist of life-enhancing amenities, Rove Home is a complete ecosystem that has everything you'll ever need.`} @@ -100,80 +100,81 @@ function AboutComplexPage() {

768 ? secondSectionY : 0, zIndex: 1, }} > -
-
-
-

+
+
+
+

{`Own the last slice of Dubai Marina, ROVE Style`}

-

+

{`With an extended playlist of life-enhancing amenities, Rove Home is a complete ecosystem that has everything you'll ever need.`}

-
-

+
+

Rove Home has it all

-

+

{`Rove Home Dubai Marina features modern-day conveniences, carefully curated for an active and social lifestyle.`}

-
+
{dubaiMarinaFeatures.map((feature) => (
-
+
{feature.name}
))}
-
-

- Dubai, within reach +
+

+ Dubai, within reach

-
+
{dubaiMarinaDescription.map((descriptionItem) => (
setSelectedCategorySlider(descriptionItem.title) } > -
+
{descriptionItem.title}

{descriptionItem.description} @@ -181,10 +182,10 @@ function AboutComplexPage() {

))}
- +
{sliderBadgesCategory[selectedCategorySlider].map( (badgeItem, index) => ( @@ -212,7 +213,7 @@ function AboutComplexPage() { transition={{ duration: 0.3, delay: index * 0.1, - ease: 'easeOut', + ease: "easeOut", }} > @@ -223,131 +224,131 @@ function AboutComplexPage() {
-
-

+
+

Dubai's first-ever combinable Apartments

- -

+ +

{`Enjoy the option to combine 2 apartments and create a larger space and configuration.`}

-
+
-

+

Studio²

- +
-

+

Studio²

- +
-

+

1 Bedroom²

-
or
-
+
or
+
-

+

Studio²

- +
-

+

1 Bedroom²

- +
-

+

2 Bedroom²

-
+

Live central. Live centred

-

+

{`Located in the heart of Dubai Marina, Rove Home Dubai Marina is where active living meets modern convenience. Enjoy an energetic lifestyle surrounded by trendy cafés, shops, and entertainment options – all within reach.`}

-
+
central map -
+
{}}