diff --git a/index.html b/index.html index 1f7cf1c..d06d2f6 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@
- +- {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 + ? `${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
+- {count} -
-- {formattedUnitTypes.get(unitType)} -
-- 8 -
-- Indoor Amenties -
-- 8 -
-- Outdoor Amenties -
-+ {count} +
++ {formattedUnitTypes.get(unitType)} +
++ {amentiesCount.indoor} +
++ Indoor Amenties +
++ {amentiesCount.outdoor} +
++ Outdoor Amenties +
+{`AED ${Intl.NumberFormat("ar-AE", { currency: "AED", minimumFractionDigits: 0, }).format(unit.salesPrice)}`}
- )} + }{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 (
{unit.project}
-{unit.wing}
+{unit.project}
+{unit.wing}
+ + > + )} +Floor {unit.floor}
- > - )} -Floor {unit.floor}
- -{unit.unitNo}
+{unit.unitNo}
+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}
+{`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}
+{`AED ${Intl.NumberFormat( - "ar-AE", - { - currency: "AED", - minimumFractionDigits: 0, - } - ).format(unit.salesPrice)}`}
- )}