upd
This commit is contained in:
@@ -1,8 +1,11 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import { useEffect } from "react";
|
||||
import DownloadIcon from "../icons/DownloadIcon";
|
||||
import useFavoritesStore from "../../store/useFavoritesStore";
|
||||
|
||||
function NavbarModal() {
|
||||
const { favoriteUnits } = useFavoritesStore();
|
||||
|
||||
useEffect(() => {
|
||||
document.body.style.overflow = "hidden";
|
||||
|
||||
@@ -34,9 +37,18 @@ function NavbarModal() {
|
||||
<div className="flex flex-col gap-2">
|
||||
<a
|
||||
href="/favorites"
|
||||
className="p-4 bg-white rounded-lg text-[#0D1922]"
|
||||
className="p-4 bg-white rounded-lg text-[#0D1922] "
|
||||
>
|
||||
Favorites
|
||||
<div className="relative w-fit">
|
||||
Favorites
|
||||
{favoriteUnits.length > 0 && (
|
||||
<div className="absolute -right-[18px] -top-1 w-4 h-4 bg-[#00BED7] rounded-full flex items-center justify-center">
|
||||
<p className="text-white text-[10px] font-mono font-semibold -ml-[0.5px]">
|
||||
{favoriteUnits.length}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
<a href="/search" className="p-4 bg-white rounded-lg text-[#0D1922]">
|
||||
Search
|
||||
@@ -45,13 +57,13 @@ function NavbarModal() {
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<p className="font-semibold text-[#0D1922]">Brochures</p>
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm text-[#0D1922]">Rove Home Marasi Drive</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center justify-between text-xs font-semibold rounded-lg bg-white px-3 py-2"
|
||||
className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
|
||||
download
|
||||
>
|
||||
<p>Rove Main Brochure</p>
|
||||
@@ -59,7 +71,7 @@ function NavbarModal() {
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center justify-between text-xs font-semibold rounded-lg bg-white px-3 py-2"
|
||||
className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
|
||||
download
|
||||
>
|
||||
<p>Rove Amenties Brochure</p>
|
||||
@@ -67,7 +79,7 @@ function NavbarModal() {
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center justify-between text-xs font-semibold rounded-lg bg-white px-3 py-2"
|
||||
className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
|
||||
download
|
||||
>
|
||||
<p>Rove Technical Brochure</p>
|
||||
@@ -80,7 +92,7 @@ function NavbarModal() {
|
||||
<div className="flex flex-col gap-2">
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center justify-between text-xs font-semibold rounded-lg bg-white px-3 py-2"
|
||||
className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
|
||||
download
|
||||
>
|
||||
<p>Rove Main Brochure</p>
|
||||
@@ -88,7 +100,7 @@ function NavbarModal() {
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center justify-between text-xs font-semibold rounded-lg bg-white px-3 py-2"
|
||||
className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
|
||||
download
|
||||
>
|
||||
<p>Rove Amenties Brochure</p>
|
||||
@@ -96,7 +108,7 @@ function NavbarModal() {
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center justify-between text-xs font-semibold rounded-lg bg-white px-3 py-2"
|
||||
className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
|
||||
download
|
||||
>
|
||||
<p>Rove Technical Brochure</p>
|
||||
|
||||
@@ -208,9 +208,9 @@ function UnitModal({ unit, type }: Props) {
|
||||
className={`fixed top-0 left-0 w-full overflow-y-scroll h-screen pt-[56px] z-40 backdrop-blur select-none`}
|
||||
>
|
||||
<div className="flex justify-end min-h-full">
|
||||
<div className="bg-[#F3F3F2] p-6 max-w-[1240px] w-full space-y-20">
|
||||
<div className="flex gap-4">
|
||||
<div className="left max-w-[800px] w-full flex flex-col gap-4">
|
||||
<div className="bg-[#F3F3F2] lg:p-6 p-4 max-w-[1240px] w-full sm:space-y-20 space-y-10">
|
||||
<div className="flex gap-2 sm:gap-4 max-lg:flex-col">
|
||||
<div className="left lg:max-w-[800px] w-full flex flex-col gap-4">
|
||||
<div className="flex justify-between gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
@@ -252,7 +252,7 @@ function UnitModal({ unit, type }: Props) {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white p-10 rounded-2xl flex flex-col items-center justify-center gap-10 flex-1">
|
||||
<div className="flex flex-col items-center justify-center flex-1 gap-10 p-10 bg-white rounded-2xl">
|
||||
<div className="">
|
||||
<img
|
||||
src={getMainImage()}
|
||||
@@ -270,124 +270,126 @@ function UnitModal({ unit, type }: Props) {
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="right w-[376px] min-w-[376px] space-y-2">
|
||||
<div className="relative">
|
||||
<img
|
||||
src={getViewImage()}
|
||||
alt=""
|
||||
className="h-[328px] w-full object-cover rounded-2xl pointer-events-none"
|
||||
/>
|
||||
<div className="right lg:w-[376px] lg:min-w-[376px] grid lg:grid-cols-1 sm:grid-cols-2 grid-cols-1 gap-2 grid-rows">
|
||||
<div className="relative max-sm:order-last">
|
||||
<div
|
||||
className="absolute top-0 left-0 w-full h-full rounded-2xl p-6 flex items-end"
|
||||
className="lg:h-[328px] sm:h-full max-sm:aspect-square bg-center bg-no-repeat bg-cover rounded-2xl"
|
||||
style={{ backgroundImage: `url('${getViewImage()}')` }}
|
||||
></div>
|
||||
|
||||
<div
|
||||
className="absolute top-0 left-0 flex items-end w-full h-full p-6 rounded-2xl"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(180deg, rgba(16, 41, 79, 0) 67.74%, rgba(16, 41, 79, 0.64) 100%)",
|
||||
}}
|
||||
>
|
||||
<div className="text-white font-semibold space-y-1">
|
||||
<div className="space-y-1 font-semibold text-white">
|
||||
<p className="text-xs">View from window</p>
|
||||
<p className="text-xl">{getViewText()}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-2xl space-y-6">
|
||||
<div className="space-y-2 border-b border-[E2E2DC] pb-4">
|
||||
<p className="text-xl text-[#0D1922] font-semibold">
|
||||
{unit.unitName}, {unit.totalArea} Sqft
|
||||
</p>
|
||||
<div className="">
|
||||
<p className="text-sm text-[#00BED7]">
|
||||
Rove Home Marasi Drive
|
||||
<div className="space-y-2">
|
||||
<div className="p-4 space-y-6 bg-white sm:p-6 rounded-2xl">
|
||||
<div className="space-y-2 border-b border-[E2E2DC] pb-4">
|
||||
<p className="sm:text-xl text-[#0D1922] font-semibold">
|
||||
{unit.unitName}, {unit.totalArea} Sqft
|
||||
</p>
|
||||
<div className="text-xs font-semibold flex items-center gap-2">
|
||||
<p>{unit.unitNo[0] === "E" ? "East" : "West"} Wing</p>
|
||||
<div className=""></div>
|
||||
<p>Floor {unit.floor}</p>
|
||||
<div className=""></div>
|
||||
<p>{unit.unitNo}</p>
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm text-[#00BED7]">
|
||||
Rove Home Marasi Drive
|
||||
</p>
|
||||
<div className="flex items-center gap-2 sm:text-xs text-[10px] font-semibold">
|
||||
<p>{unit.unitNo[0] === "E" ? "East" : "West"} Wing</p>
|
||||
<div className="bg-[#E2E2DC] w-1 h-1 rounded-full"></div>
|
||||
<p>Floor {unit.floor}</p>
|
||||
<div className="bg-[#E2E2DC] w-1 h-1 rounded-full"></div>
|
||||
<p>{unit.unitNo}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 max-sm:text-sm">
|
||||
<div className="flex justify-between">
|
||||
<p className="text-[#0D1922]/40">Total Area</p>
|
||||
<p className="text-[#0D1922]">{unit.totalArea} Sqft</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p className="text-[#0D1922]/40">Suite Area</p>
|
||||
<p className="text-[#0D1922]">{unit.suiteArea} Sqft</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p className="text-[#0D1922]/40">Balcony Area</p>
|
||||
<p className="text-[#0D1922]">{unit.balconyArea} Sqft</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p className="text-[#0D1922]/40">Status</p>
|
||||
<p className="text-[#0D1922]">{unit.propertyStatus}</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p className="text-[#0D1922]/40">Parking Space</p>
|
||||
<p className="text-[#0D1922]">{unit.parkingSpaces}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xl text-[#00BED7] font-semibold">
|
||||
{unit.unitPrice ? (
|
||||
<>
|
||||
AED{" "}
|
||||
{new Intl.NumberFormat("ar-AE", {
|
||||
currency: "AED",
|
||||
})
|
||||
.format(unit.unitPrice)
|
||||
.replaceAll(",", " ")}
|
||||
</>
|
||||
) : (
|
||||
"Unavailable"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<p>Total Area</p>
|
||||
<p className="text-[#0D1922]">{unit.totalArea} Sqft</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Suite Area</p>
|
||||
<p className="text-[#0D1922]">{unit.suiteArea} Sqft</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Balcony Area</p>
|
||||
<p className="text-[#0D1922]">{unit.balconyArea} Sqft</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Status</p>
|
||||
<p className="text-[#0D1922]">{unit.propertyStatus}</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p>Parking Space</p>
|
||||
<p className="text-[#0D1922]">{unit.parkingSpaces}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xl text-[#00BED7] font-semibold">
|
||||
{unit.unitPrice ? (
|
||||
<>
|
||||
AED{" "}
|
||||
{new Intl.NumberFormat("ar-AE", {
|
||||
currency: "AED",
|
||||
})
|
||||
.format(unit.unitPrice)
|
||||
.replaceAll(",", " ")}
|
||||
</>
|
||||
) : (
|
||||
"Unavailable"
|
||||
<div className="flex gap-2 p-6 bg-white rounded-2xl">
|
||||
{unitTypes.find((unitType) => unitType.type === type)
|
||||
?.tourAvailable && (
|
||||
<Button
|
||||
buttonType="secondary"
|
||||
icon={<VirtualTourIcon />}
|
||||
text="3D tour"
|
||||
className="justify-center w-full text-sm"
|
||||
onClick={handleClickTour}
|
||||
/>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-2xl flex gap-2">
|
||||
{unitTypes.find((unitType) => unitType.type === type)
|
||||
?.tourAvailable && (
|
||||
<Button
|
||||
buttonType="secondary"
|
||||
icon={<VirtualTourIcon />}
|
||||
text="3D tour"
|
||||
className="justify-center text-sm w-full"
|
||||
onClick={handleClickTour}
|
||||
buttonType="cta"
|
||||
icon={<BookingIcon />}
|
||||
text="Send Enquiry"
|
||||
className="text-[13.6px] justify-center disabled:hover:bg-[#ECEDEE] w-full"
|
||||
disabled
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
buttonType="cta"
|
||||
icon={<BookingIcon />}
|
||||
text="Send Enquiry"
|
||||
className="text-[13.6px] justify-center disabled:hover:bg-[#ECEDEE] w-full"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="p-8 bg-white rounded-2xl flex flex-col justify-between">
|
||||
<div className="left w-[376px] min-w-[376px] space-y-6">
|
||||
<div className="grid grid-cols-1 gap-3 sm:gap-4 sm:grid-cols-2">
|
||||
<div className="flex flex-col justify-between gap-4 p-4 bg-white sm:p-8 rounded-2xl">
|
||||
<div className="left lg:w-[376px] lg:min-w-[376px] space-y-6">
|
||||
<div className="space-y-2">
|
||||
<p className="text-[40px] text-[#0D1922] font-bold">
|
||||
<p className="sm:text-[40px] text-2xl text-[#0D1922] font-bold sm:leading-[54px]">
|
||||
{
|
||||
unitTypes.find((unitType) => unitType.type === type)
|
||||
?.title
|
||||
}
|
||||
</p>
|
||||
<p className="text-xl text-[#00BED7] font-semibold">
|
||||
<p className="sm:text-xl text-[#00BED7] font-semibold leading-[18.4px]">
|
||||
{unitTypes.find((unitType) => unitType.type === type)?.desc}
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="">
|
||||
<div className="sm:leading-[22px]">
|
||||
<p className="space-y-2 max-sm:text-sm">
|
||||
{
|
||||
unitTypes.find((unitType) => unitType.type === type)
|
||||
?.texts[0]
|
||||
}
|
||||
</p>
|
||||
<p className="">
|
||||
<p className="space-y-2 max-sm:text-sm">
|
||||
{
|
||||
unitTypes.find((unitType) => unitType.type === type)
|
||||
?.texts[1]
|
||||
@@ -395,24 +397,44 @@ function UnitModal({ unit, type }: Props) {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="">
|
||||
<p className="">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs sm:text-sm">
|
||||
Up to{" "}
|
||||
{unitTypes.find((unitType) => unitType.type === type)?.sqft}{" "}
|
||||
Sqft
|
||||
</p>
|
||||
<p></p>
|
||||
<p className="text-xl text-[#00BED7] font-semibold">
|
||||
{unit.unitPrice && (
|
||||
<>
|
||||
from AED{" "}
|
||||
{new Intl.NumberFormat("ar-AE", {
|
||||
currency: "AED",
|
||||
})
|
||||
.format(unit.unitPrice)
|
||||
.replaceAll(",", " ")}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right">
|
||||
<div>
|
||||
<img
|
||||
src={
|
||||
unitTypes.find((unitType) => 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"
|
||||
/>
|
||||
{/* <div
|
||||
className="lg:max-h-[644px] sm:h-full max-sm:aspect-square bg-center bg-no-repeat bg-cover rounded-2xl"
|
||||
style={{
|
||||
backgroundImage: `url('${
|
||||
unitTypes.find((unitType) => unitType.type === type)
|
||||
?.imageDesc
|
||||
}')`,
|
||||
}}
|
||||
></div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user