diff --git a/index.html b/index.html index 1f7cf1c..d06d2f6 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Rove Home diff --git a/public/images/unit-types/dubai-marina/1-bedroom-a.jpg b/public/images/unit-types/dubai-marina/1-bedroom-a.jpg index 82cb076..22429ef 100644 Binary files a/public/images/unit-types/dubai-marina/1-bedroom-a.jpg and b/public/images/unit-types/dubai-marina/1-bedroom-a.jpg differ diff --git a/public/images/unit-types/dubai-marina/1-bedroom-b.jpg b/public/images/unit-types/dubai-marina/1-bedroom-b.jpg index 8f7ab49..c3ddc57 100644 Binary files a/public/images/unit-types/dubai-marina/1-bedroom-b.jpg and b/public/images/unit-types/dubai-marina/1-bedroom-b.jpg differ diff --git a/public/images/unit-types/dubai-marina/1-bedroom-c.jpg b/public/images/unit-types/dubai-marina/1-bedroom-c.jpg index 36d64b3..2ddd0b4 100644 Binary files a/public/images/unit-types/dubai-marina/1-bedroom-c.jpg and b/public/images/unit-types/dubai-marina/1-bedroom-c.jpg differ diff --git a/public/images/unit-types/dubai-marina/1-bedroom-d.jpg b/public/images/unit-types/dubai-marina/1-bedroom-d.jpg index e4a2612..238379e 100644 Binary files a/public/images/unit-types/dubai-marina/1-bedroom-d.jpg and b/public/images/unit-types/dubai-marina/1-bedroom-d.jpg differ diff --git a/public/images/unit-types/dubai-marina/1-bedroom-loft-a.jpg b/public/images/unit-types/dubai-marina/1-bedroom-loft-a.jpg index 0ff5412..b1f3d07 100644 Binary files a/public/images/unit-types/dubai-marina/1-bedroom-loft-a.jpg and b/public/images/unit-types/dubai-marina/1-bedroom-loft-a.jpg differ diff --git a/public/images/unit-types/dubai-marina/1-bedroom-loft-b.jpg b/public/images/unit-types/dubai-marina/1-bedroom-loft-b.jpg index 4efa16f..637c164 100644 Binary files a/public/images/unit-types/dubai-marina/1-bedroom-loft-b.jpg and b/public/images/unit-types/dubai-marina/1-bedroom-loft-b.jpg differ diff --git a/public/images/unit-types/dubai-marina/1-bedroom-loft-c.jpg b/public/images/unit-types/dubai-marina/1-bedroom-loft-c.jpg index c6f5a63..f8921a8 100644 Binary files a/public/images/unit-types/dubai-marina/1-bedroom-loft-c.jpg and b/public/images/unit-types/dubai-marina/1-bedroom-loft-c.jpg differ diff --git a/public/images/unit-types/dubai-marina/2-bedroom-a.jpg b/public/images/unit-types/dubai-marina/2-bedroom-a.jpg index 5f24c21..4fb92b4 100644 Binary files a/public/images/unit-types/dubai-marina/2-bedroom-a.jpg and b/public/images/unit-types/dubai-marina/2-bedroom-a.jpg differ diff --git a/public/images/unit-types/dubai-marina/2-bedroom-loft.jpg b/public/images/unit-types/dubai-marina/2-bedroom-loft.jpg index 247f6ee..b469ca2 100644 Binary files a/public/images/unit-types/dubai-marina/2-bedroom-loft.jpg and b/public/images/unit-types/dubai-marina/2-bedroom-loft.jpg differ diff --git a/public/images/unit-types/dubai-marina/studio-2-a.jpg b/public/images/unit-types/dubai-marina/studio-2-a.jpg index 09e6143..978fec3 100644 Binary files a/public/images/unit-types/dubai-marina/studio-2-a.jpg and b/public/images/unit-types/dubai-marina/studio-2-a.jpg differ diff --git a/public/images/unit-types/dubai-marina/studio-2-b.jpg b/public/images/unit-types/dubai-marina/studio-2-b.jpg index b3bbd1f..3261c9e 100644 Binary files a/public/images/unit-types/dubai-marina/studio-2-b.jpg and b/public/images/unit-types/dubai-marina/studio-2-b.jpg differ diff --git a/public/images/unit-types/dubai-marina/studio-2-c.jpg b/public/images/unit-types/dubai-marina/studio-2-c.jpg index 7332d60..1db11cc 100644 Binary files a/public/images/unit-types/dubai-marina/studio-2-c.jpg and b/public/images/unit-types/dubai-marina/studio-2-c.jpg differ diff --git a/public/images/unit-types/marasi-drive/1-bedroom-a.jpg b/public/images/unit-types/marasi-drive/1-bedroom-a.jpg index ec4e7fe..e57c3ff 100644 Binary files a/public/images/unit-types/marasi-drive/1-bedroom-a.jpg and b/public/images/unit-types/marasi-drive/1-bedroom-a.jpg differ diff --git a/public/images/unit-types/marasi-drive/1-bedroom-b.jpg b/public/images/unit-types/marasi-drive/1-bedroom-b.jpg index cc572ab..a423cf6 100644 Binary files a/public/images/unit-types/marasi-drive/1-bedroom-b.jpg and b/public/images/unit-types/marasi-drive/1-bedroom-b.jpg differ diff --git a/public/images/unit-types/marasi-drive/1-bedroom-c.jpg b/public/images/unit-types/marasi-drive/1-bedroom-c.jpg index 54b0a2a..ab42344 100644 Binary files a/public/images/unit-types/marasi-drive/1-bedroom-c.jpg and b/public/images/unit-types/marasi-drive/1-bedroom-c.jpg differ diff --git a/public/images/unit-types/marasi-drive/1-bedroom-d.jpg b/public/images/unit-types/marasi-drive/1-bedroom-d.jpg index 7ecd104..e8a4e2c 100644 Binary files a/public/images/unit-types/marasi-drive/1-bedroom-d.jpg and b/public/images/unit-types/marasi-drive/1-bedroom-d.jpg differ diff --git a/public/images/unit-types/marasi-drive/2-bedroom-a.jpg b/public/images/unit-types/marasi-drive/2-bedroom-a.jpg index 437aab9..0a42dc0 100644 Binary files a/public/images/unit-types/marasi-drive/2-bedroom-a.jpg and b/public/images/unit-types/marasi-drive/2-bedroom-a.jpg differ diff --git a/public/images/unit-types/marasi-drive/2-bedroom-b.jpg b/public/images/unit-types/marasi-drive/2-bedroom-b.jpg index 3bc5ed6..558c058 100644 Binary files a/public/images/unit-types/marasi-drive/2-bedroom-b.jpg and b/public/images/unit-types/marasi-drive/2-bedroom-b.jpg differ diff --git a/public/images/unit-types/marasi-drive/studio-2.jpg b/public/images/unit-types/marasi-drive/studio-2.jpg index 6bf287c..d2e7165 100644 Binary files a/public/images/unit-types/marasi-drive/studio-2.jpg and b/public/images/unit-types/marasi-drive/studio-2.jpg differ diff --git a/public/images/unit-types/marasi-drive/studio-flex.jpg b/public/images/unit-types/marasi-drive/studio-flex.jpg index 9b968de..5fc782a 100644 Binary files a/public/images/unit-types/marasi-drive/studio-flex.jpg and b/public/images/unit-types/marasi-drive/studio-flex.jpg differ diff --git a/public/irth.png b/public/irth.png new file mode 100644 index 0000000..ec1f1bc Binary files /dev/null and b/public/irth.png differ diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/FloorPopup.tsx b/src/components/FloorPopup.tsx index 0064138..73ab120 100644 --- a/src/components/FloorPopup.tsx +++ b/src/components/FloorPopup.tsx @@ -1,5 +1,7 @@ +import { useEffect, useState } from "react"; import { formattedUnitTypes } from "../data/formattedUnitTypes"; import { usePopupStore } from "../stores/usePopupStore"; +import getAmentiesCount, { AmentiesCount } from "../utils/getAmentiesCount"; import { FloorsData } from "./FloorSelect"; import ArrowRightIcon from "./icons/ArrowRightIcon"; import HumanIcon from "./icons/HumanIcon"; @@ -14,89 +16,109 @@ interface FloorPopupProps { function FloorPopup({ title, complexName, data, onSelect }: FloorPopupProps) { const { setPopup } = usePopupStore(); + const [amentiesCount, setAmentiesCount] = useState( + null + ); + + useEffect(() => { + if (Number.isNaN(+title.split(" ").at(-1)!)) { + setAmentiesCount(getAmentiesCount(complexName, title)); + } else { + setAmentiesCount(null); + } + + return () => setAmentiesCount(null); + }, [complexName, title]); + + useEffect(() => { + console.log(amentiesCount); + }, [amentiesCount]); return (

- {Number.isNaN(+title.split(" ").at(-1)!) - ? title - : `${title.split(" ").at(-1)} floor`} + {amentiesCount ? title : `${title.split(" ").at(-1)} floor`}

- {complexName === "marasi-drive" && - !Number.isNaN(+title.split(" ").at(-1)!) && ( -

- {title.split(" ")[0]} Wing + {complexName === "marasi-drive" && !amentiesCount && ( +

{title.split(" ")[0]} Wing

+ )} +
+ {amentiesCount !== null && ( + <> +
+

+ {amentiesCount + ? `${amentiesCount?.total} Amenties` + : `${ + complexName === "marasi-drive" + ? data[ + title.split(" ")[0] === "East" + ? "East" + : title.split(" ")[0] === "West" + ? "West" + : "others" + ].totalUnits + : data.others.totalUnits + } apartments`}

- )} -
-
-

- {title && Number.isNaN(+title!.split(" ").at(-1)!) - ? "16 Amen ties" - : `${ - complexName === "marasi-drive" - ? data[ - title.split(" ")[0] === "East" - ? "East" - : title.split(" ")[0] === "West" - ? "West" - : "others" - ].totalUnits - : data.others.totalUnits - } apartments`} -

- {!Number.isNaN(+title.split(" ").at(-1)!) && ( -
- - - -

Virtual Tour

+ {!amentiesCount && ( +
+ + + +

Virtual Tour

+
+ )}
- )} -
-
-
- {!Number.isNaN(+title.split(" ").at(-1)!) ? ( - Object.entries( - data[ - title.split(" ")[0] === "East" - ? "East" - : title.split(" ")[0] === "West" - ? "West" - : "others" - ].types - ).map(([unitType, count]) => ( -
-

- {count} -

-

- {formattedUnitTypes.get(unitType)} -

-
- )) - ) : ( - <> -
-

- 8 -

-

- Indoor Amenties -

-
-
-

- 8 -

-

- Outdoor Amenties -

-
- - )} -
+
+
+ {!amentiesCount ? ( + Object.entries( + data[ + title.split(" ")[0] === "East" + ? "East" + : title.split(" ")[0] === "West" + ? "West" + : "others" + ].types + ).map(([unitType, count]) => ( +
+

+ {count} +

+

+ {formattedUnitTypes.get(unitType)} +

+
+ )) + ) : ( + <> + {amentiesCount?.indoor && ( +
+

+ {amentiesCount.indoor} +

+

+ Indoor Amenties +

+
+ )} + {amentiesCount?.outdoor && ( +
+

+ {amentiesCount.outdoor} +

+

+ Outdoor Amenties +

+
+ )} + + )} +
+ + )}
-
+
- {( + {

{`AED ${Intl.NumberFormat("ar-AE", { currency: "AED", minimumFractionDigits: 0, }).format(unit.salesPrice)}`}

- )} + }
); diff --git a/src/components/UnitTypeCard.tsx b/src/components/UnitTypeCard.tsx index 2e64402..6861c15 100644 --- a/src/components/UnitTypeCard.tsx +++ b/src/components/UnitTypeCard.tsx @@ -21,7 +21,7 @@ function UnitTypeCard({ project, type }: { project: Project; type: UnitType }) {

{type.floors}

-
+
void; defaultOption: string; className?: string; label?: string; + maxOptionsCount?: number; }) { const [isShow, setIsShow] = useState(false); const [selectedOption, setSelectedOption] = useState(defaultOption); @@ -32,18 +34,39 @@ function Select({ useEffect(() => onSelect(selectedOption), [selectedOption]); function handleScroll() { - if (dropDownRef.current) - dropDownRef.current.style.maxHeight = `calc(100vh - ${ - dropDownRef.current?.getBoundingClientRect().y - }px - 0.278vw)`; + if (!dropDownRef.current) return; + dropDownRef.current.style.maxHeight = `calc(100vh - ${ + dropDownRef.current?.getBoundingClientRect().y + }px - 0.278vw)`; + } + + function dropdownRefCallback(el: HTMLDivElement) { + if (!el) return; + + dropDownRef.current = el; + + if (!maxOptionsCount) return; + + const optionHeight = el.clientHeight / options.length; + + el.style.maxHeight = `${optionHeight * maxOptionsCount}px`; + + const scrollOffset = + (options.findIndex((option) => option === selectedOption) - + Math.floor(maxOptionsCount / 2)) * + optionHeight; + + el.scrollTo({ top: scrollOffset }); } useEffect(() => { + if (maxOptionsCount) return; + handleScroll(); document.addEventListener("scroll", handleScroll); return () => document.removeEventListener("scroll", handleScroll); - }, [isShow]); + }, [isShow, maxOptionsCount]); return (
@@ -74,7 +97,7 @@ function Select({ animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }} - ref={dropDownRef} + ref={dropdownRefCallback} className="absolute 2xl:mt-[0.278vw] 2xl:pt-[0.278vw] mt-1 p-1 2xl:space-y-[0.139vw] space-y-0.5 shadow-[0px_2px_8px_rgba(0,0,0,0.15)] overflow-auto rounded-xl bg-white w-full z-1" > {options.map((option, index) => ( diff --git a/src/pages/FloorsPage.tsx b/src/pages/FloorsPage.tsx index 962958c..024177f 100644 --- a/src/pages/FloorsPage.tsx +++ b/src/pages/FloorsPage.tsx @@ -45,9 +45,7 @@ function FloorsPage() { }); const { data: unitsOnFloor } = useQuery({ - enabled: - !!selectedFloor && - !SPECIAL_FLOORS.includes(selectedFloor), + enabled: !!selectedFloor && !SPECIAL_FLOORS.includes(selectedFloor), queryKey: ["units-on-floor", complexName, selectedFloor], queryFn: () => api @@ -110,6 +108,7 @@ function FloorsPage() { defaultOption={selectedFloor?.toString() || ""} onSelect={setSelectedFloor} className="2xl:w-[8.333vw] md:max-xl:w-[120px] w-full" + maxOptionsCount={7} />
@@ -156,12 +155,11 @@ function FloorsPage() {
!isMobile && setPosition({ x: e.clientX, y: e.clientY }) } > - {selectedFloor && unitsOnFloor && ( <> {+selectedFloor >= 7 && +selectedFloor < 39 && ( @@ -236,6 +234,7 @@ function FloorsPage() { defaultOption={selectedFloor?.toString() || ""} onSelect={setSelectedFloor} className="2xl:w-[8.333vw] md:max-2xl:w-[120px] w-full" + maxOptionsCount={7} />
diff --git a/src/pages/UnitPage.tsx b/src/pages/UnitPage.tsx index 9d0c837..99da56f 100644 --- a/src/pages/UnitPage.tsx +++ b/src/pages/UnitPage.tsx @@ -14,6 +14,7 @@ import { projects } from "../data/projects"; import { useEffect, useState } from "react"; import UnitTypeImageWithMarkers from "../components/UnitTypeImageWithMarkers"; import { getUnitTypeVariantMarasiDrive } from "../utils/getUnitTypeVariantMarasiDrive"; +import { formattedUnitTypes } from "../data/formattedUnitTypes"; // import { useEffect } from "react"; // import PlayIcon from "../components/icons/PlayIcon"; // import { useRef } from "react"; @@ -81,24 +82,29 @@ function UnitPage() { } return ( -
-
- project.slug === params.complexName) - ?.types.find( - (type) => - type.slug === - getUnitTypeSlug(params.complexName!, unit.unitType) - )?.legend || [] - } - /> + + + {formattedUnitTypes.get(unit.unitType)} + + +
+
+ project.slug === params.complexName) + ?.types.find( + (type) => + type.slug === + getUnitTypeSlug(params.complexName!, unit.unitType) + )?.legend || [] + } + /> - {/* */} - {getUnitTypeSlug(params.complexName!, unit.unitType).includes( - "loft" - ) && ( -
- - + {getUnitTypeSlug(params.complexName!, unit.unitType).includes( + "loft" + ) && ( +
+ + +
+ )}
- )} -
-
-
-
-
-

{unit.unitType}

-
-

{unit.project}

-
- {unit.wing && ( - <> -

{unit.wing}

+
+
+
+
+

+ {formattedUnitTypes.get(unit.unitType)} +

+
+

{unit.project}

+
+ {unit.wing && ( + <> +

{unit.wing}

+
+ + )} +

Floor {unit.floor}

- - )} -

Floor {unit.floor}

-
-

{unit.unitNo}

+

{unit.unitNo}

+
+
+
+
+ +
-
-
- - -
-
-
- {/*
+ {/*
videoButtonRef && videoButtonRef.current?.click()} > @@ -187,62 +195,64 @@ function UnitPage() {
*/} -
-
-

Total Area

-

{unit.squareFt.toFixed(2)} Sqft

+
+
+

Total Area

+

{unit.squareFt.toFixed(2)} Sqft

+
+
+

Suite Area

+

{unit.suitsArea.toFixed(2)} Sqft

+
+
+

Balcony Area

+

{unit.balconyArea.toFixed(2)} Sqft

+
+
+

Status

+

+ {unit.state.charAt(0).toUpperCase() + + unit.state.slice(1).replace(/_/g, " ")} +

+
+
+

Parking Space

+

{unit.noOfParkingSpace}

+
+
+ {!unit.project.includes("Marasi Drive") && ( +

{`AED ${Intl.NumberFormat( + "ar-AE", + { + currency: "AED", + minimumFractionDigits: 0, + } + ).format(unit.salesPrice)}`}

+ )}
-
-

Suite Area

-

{unit.suitsArea.toFixed(2)} Sqft

-
-
-

Balcony Area

-

{unit.balconyArea.toFixed(2)} Sqft

-
-
-

Status

-

- {unit.state.charAt(0).toUpperCase() + - unit.state.slice(1).replace(/_/g, " ")} -

-
-
-

Parking Space

-

{unit.noOfParkingSpace}

+
+ +
- {!unit.project.includes("Marasi Drive") && ( -

{`AED ${Intl.NumberFormat( - "ar-AE", - { - currency: "AED", - minimumFractionDigits: 0, - } - ).format(unit.salesPrice)}`}

- )}
-
- - -
-
-
+ + ); } diff --git a/src/utils/getAmentiesCount.ts b/src/utils/getAmentiesCount.ts new file mode 100644 index 0000000..d9416ac --- /dev/null +++ b/src/utils/getAmentiesCount.ts @@ -0,0 +1,22 @@ +export interface AmentiesCount { + total: number; + indoor?: number; + outdoor?: number; +} + +export default function getAmentiesCount( + complexName: string, + floorTitle: string +):AmentiesCount | null { + const dict = new Map([ + ["marasi-drive Rooftop", { total: 10 }], + ["marasi-drive Sky Garden", { total: 15, indoor: 3, outdoor: 12 }], + ["marasi-drive Podium Level", { total: 27, indoor: 13, outdoor: 14 }], + ["marasi-drive Ground Level", { total: 7 }], + ["dubai-marina Rooftop", { total: 14 }], + ["dubai-marina Podium Level", { total: 21, indoor: 8, outdoor: 13 }], + ["dubai-marina Ground Level", { total: 14 }], + ]); + + return dict.get(`${complexName} ${floorTitle}`) || null; +}