inmake/IRTH-2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
inmake
2024-10-25 20:39:31 +05:00
parent 98017b3d83
commit 2ce2a81aef
529 changed files with 3055 additions and 1954 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/modals/UnitModal.tsx
+25 -59
View File
@@ -1,7 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */
import useModal from "../../store/useModal";
import IUnit from "../../types/IUnit";
import Button from "../Button";
import ArrowLeftIcon from "../icons/ArrowLeftIcon";
import BookingIcon from "../icons/BookingIcon";
import HeartIcon from "../icons/HeartIcon";
@@ -12,6 +11,7 @@ import { useEffect } from "react";
import useFavoritesStore from "../../store/useFavoritesStore";
import HeartFilledIcon from "../icons/HeartFilledIcon";
import ShareIcon from "../icons/ShareIcon";
import Button3 from "../Button3";
interface Props {
unit: IUnit;
@@ -185,9 +185,7 @@ function UnitModal({ unit, type }: Props) {
if (!favoriteUnits.some((favoriteUnit) => favoriteUnit.id === unit.id)) {
setFavoriteUnits([...favoriteUnits, unit]);
} else {
setFavoriteUnits(
favoriteUnits.filter((favoriteUnit) => favoriteUnit.id !== unit.id)
);
setFavoriteUnits(favoriteUnits.filter((favoriteUnit) => favoriteUnit.id !== unit.id));
}
}
@@ -204,25 +202,16 @@ function UnitModal({ unit, type }: Props) {
}, []);
return (
<div
className={`fixed top-0 left-0 w-full overflow-y-scroll h-dvh pt-[56px] z-40 backdrop-blur select-none`}
>
<div className={`fixed top-0 left-0 w-full overflow-y-scroll h-dvh pt-[56px] z-40 backdrop-blur select-none`}>
<div className="flex justify-end min-h-full">
<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
buttonType="cta"
icon={<ArrowLeftIcon />}
onClick={() => setModal(null)}
/>
<Button3 icon={<ArrowLeftIcon />} onlyIcon onClick={() => setModal(null)} />
<p className="text-2xl font-[#0D1922] font-semibold">
{
unitTypes.find((unitType) => unitType.type === type)
?.title
}
{unitTypes.find((unitType) => unitType.type === type)?.title}
</p>
</div>
<div className="flex gap-2">
@@ -242,9 +231,7 @@ function UnitModal({ unit, type }: Props) {
className="w-10 h-10 flex items-center justify-center border border-[#E2E2DC] rounded-full bg-[#FFFFFF] bg-opacity-80 hover:text-[#0D1922] hover:bg-opacity-100 hover:border-[#00BED7] transition-all"
onClick={() => addOrRemoveFromFavorites(unit)}
>
{favoriteUnits.some(
(favoriteUnit) => favoriteUnit.id === unit.id
) ? (
{favoriteUnits.some((favoriteUnit) => favoriteUnit.id === unit.id) ? (
<HeartFilledIcon className="w-5 h-5" />
) : (
<HeartIcon className="w-5 h-5" />
@@ -254,11 +241,7 @@ function UnitModal({ unit, type }: Props) {
</div>
<div className="flex flex-col items-center justify-center flex-1 gap-10 p-4 bg-white sm:p-10 rounded-2xl">
<div className="">
<img
src={getMainImage()}
alt=""
className="max-h-[580px] pointer-events-none"
/>
<img src={getMainImage()} alt="" className="max-h-[580px] pointer-events-none" />
</div>
{/* <div className="bg-[#F3F3F2] rounded-lg flex">
<Button buttonType="cta" text="Layout" />
@@ -280,8 +263,7 @@ function UnitModal({ unit, type }: Props) {
<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%)",
background: "linear-gradient(180deg, rgba(16, 41, 79, 0) 67.74%, rgba(16, 41, 79, 0.64) 100%)",
}}
>
<div className="space-y-1 font-semibold text-white">
@@ -297,9 +279,7 @@ function UnitModal({ unit, type }: Props) {
{unit.unitName}, {unit.totalArea} Sqft
</p>
<div className="space-y-1">
<p className="text-sm text-[#00BED7]">
Rove Home Marasi Drive
</p>
<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>
@@ -347,23 +327,23 @@ function UnitModal({ unit, type }: Props) {
</p>
</div>
<div className="flex gap-2 p-6 bg-white rounded-2xl">
{unitTypes.find((unitType) => unitType.type === type)
?.tourAvailable && (
<Button
buttonType="secondary"
{unitTypes.find((unitType) => unitType.type === type)?.tourAvailable && (
<Button3
variant="secondary"
icon={<VirtualTourIcon />}
text="3D tour"
className="justify-center w-full text-sm"
onClick={handleClickTour}
/>
>
3D tour
</Button3>
)}
<Button
buttonType="cta"
<Button3
icon={<BookingIcon />}
text="Send Enquiry"
className="text-[13.6px] justify-center disabled:hover:bg-[#ECEDEE] w-full"
className="text-[13.6px] justify-center w-full"
disabled
/>
>
Send Enquiry
</Button3>
</div>
</div>
</div>
@@ -373,10 +353,7 @@ function UnitModal({ unit, type }: Props) {
<div className="left lg:w-[376px] lg:min-w-[376px] space-y-6">
<div className="space-y-2">
<p className="sm:text-[40px] text-2xl text-[#0D1922] font-bold sm:leading-[54px]">
{
unitTypes.find((unitType) => unitType.type === type)
?.title
}
{unitTypes.find((unitType) => unitType.type === type)?.title}
</p>
<p className="sm:text-xl text-[#00BED7] font-semibold leading-[18.4px]">
{unitTypes.find((unitType) => unitType.type === type)?.desc}
@@ -384,24 +361,16 @@ function UnitModal({ unit, type }: Props) {
</div>
<div className="sm:leading-[22px]">
<p className="space-y-2 max-sm:text-sm">
{
unitTypes.find((unitType) => unitType.type === type)
?.texts[0]
}
{unitTypes.find((unitType) => unitType.type === type)?.texts[0]}
</p>
<p className="space-y-2 max-sm:text-sm">
{
unitTypes.find((unitType) => unitType.type === type)
?.texts[1]
}
{unitTypes.find((unitType) => unitType.type === type)?.texts[1]}
</p>
</div>
</div>
<div className="space-y-1">
<p className="text-xs sm:text-sm">
Up to{" "}
{unitTypes.find((unitType) => unitType.type === type)?.sqft}{" "}
Sqft
Up to {unitTypes.find((unitType) => unitType.type === type)?.sqft} Sqft
</p>
<p className="text-xl text-[#00BED7] font-semibold">
{unit.unitPrice && (
@@ -419,10 +388,7 @@ function UnitModal({ unit, type }: Props) {
</div>
<div>
<img
src={
unitTypes.find((unitType) => unitType.type === type)
?.imageDesc
}
src={unitTypes.find((unitType) => unitType.type === type)?.imageDesc}
alt=""
className="lg:max-h-[644px] sm:h-full rounded-2xl pointer-events-none object-cover max-sm:aspect-square"
/>