zojgame/IRTH-Touch
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ivans fixes

Browse Source
This commit is contained in:
zojgame
2024-06-12 17:36:45 +05:00
parent d0e80e4f3b
commit ca7da6d502
32 changed files with 569 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/searchApartment/StudioFlex.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

src/components/Checkbox.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ const Checkbox = ({ onClick, checkbox }: CheckboxProps) => {
return (
<div
onClick={() => onClick(checkbox.id)}
className={`flex justify-between bg-white p-3 rounded-2xl transition-[background] duration-300 ease-in-out select-none ${
className={`flex justify-between bg-white p-3 rounded-lg transition-[background] duration-300 ease-in-out select-none ${
checkbox.disabled
? "pointer-events-none touch-none"
: "hover:bg-[#F3F3F2] cursor-pointer"
src/components/MasterInput.tsx
+25
View File
@@ -0,0 +1,25 @@
interface MasterInputProps {
placeholder: string;
isRequired: boolean;
title: string;
}
const MasterInput = ({ placeholder, isRequired, title }: MasterInputProps) => {
return (
<div className="flex flex-col">
<div className="flex pb-2">
<p className="text-[#0D192266] font-semibold text-caption-m">{title}</p>
{isRequired && <p className="text-[#E12E25] text-caption-m">*</p>}
</div>
<div className="bg-white py-[14px] px-4 rounded-lg">
<input
type="text"
className="outline-transparent outline"
placeholder={placeholder}
/>
</div>
</div>
);
};
export default MasterInput;
src/components/MasterSelector.tsx
+1 -3
View File
@@ -13,11 +13,9 @@ interface MasterSelectorProps {
options?: IOptions[];
}
// const formatPhone =
const MasterSelector = ({ title }: MasterSelectorProps) => {
return (
<div className="pb-8">
<div className="">
<p className="text-[#0D192266] text-caption-m font-semibold pb-2">
{title}
</p>
src/components/MultiRangeSlider.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ const MultiRangeSlider = ({
return (
<div className="">
<div className="flex justify-between p-3 bg-white rounded-2xl relative flex-col">
<div className="flex justify-between p-3 bg-white rounded-lg relative flex-col">
<div className="flex justify-between">
{/* <input
ref={firstInputRef}
src/components/complexWingPage/FloorDescription.tsx
+1 -1
View File
@@ -80,7 +80,7 @@ const FloorDescription = ({ descriptionFloor }: FloorDescriptionProps) => {
</div>
</div> */}
<div
className={`bg-white rounded-lg p-6 flex flex-col gap-4 w-[364px] absolute left-[414px] transition-opacity duration-300 desc-shadow ${
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[364px] absolute left-[414px] transition-opacity duration-300 desc-shadow ${
isSidebar && descriptionFloor?.wing === "West Wing"
? "opacity-100"
: "opacity-100"
src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx
+24 -4
View File
@@ -1,24 +1,44 @@
import VirtualTourIcon from "../../icons/VirtualTourIcon";
interface ApartmentDescriptionProps {
isVisible: boolean;
is3DTourAvailable: boolean;
}
const ApartmentDescription = ({ isVisible }: ApartmentDescriptionProps) => {
const ApartmentDescription = ({
isVisible,
is3DTourAvailable,
}: ApartmentDescriptionProps) => {
return (
<div className="p-6 py-3">
<div
className={`bg-white rounded-lg p-6 flex flex-col text-subheadline-s relative text-nowrap desc-shadow py-2 ${
className={`bg-white rounded-2xl p-6 flex flex-col text-subheadline-s relative text-nowrap desc-shadow py-2 ${
isVisible ? "opacity-100" : "opacity-0"
} duration-300 ease-in-out transition-opacity`}
>
<h2 className="text-[#0D1922] font-semibold">1 bedroom, 609 Sqft</h2>
<div className="flex gap-2 items-center text-caption-m font-semibold pt-1 border-b pb-4 justify-center">
<div className="flex gap-2 items-center text-caption-m font-semibold pt-1 border-b pb-4 justify-start">
<p className="text-[#0D1922B2]">East Wing</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="text-[#0D1922B2]">Floor 11</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="text-[#0D1922B2]">E-213</p>
</div>
<p className="font-semibold pt-4 text-[#00BED7]">AED 1,668,888</p>
<div className="flex justify-between items-center pt-4 gap-14">
<p className="font-semibold text-[#00BED7] text-subheadline-s">
AED 1,668,888
</p>
<div
className={`bg-[#30B21614] text-[#30B216] px-2 py-[6px] flex gap-1 items-center rounded-lg ${
is3DTourAvailable ? "opacity-100" : "opacity-0"
}`}
>
<VirtualTourIcon />
<p className="text-caption-m font-semibold text-[#30B216]">
3D-tour
</p>
</div>
</div>
<div className="w-0 h-0 border-transparent border-t-[14px] border-x-[6px] border-b-0 absolute left-6 -bottom-[13px] border-t-white"></div>
</div>
</div>
src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
+7 -3
View File
@@ -14,6 +14,7 @@ interface IFloorSidebarProps {
const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
const [mousePos, setMousePos] = useState<number[]>([0, 0]);
const [isDescVisible, setIsDescVisible] = useState(false);
const [is3DTourAvailable] = useState(true);
const { setIsSidebar } = useWingSidebar();
const navigate = useNavigate();
@@ -50,7 +51,10 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
className="absolute z-[99999] w-fit h-fit top-0 left-0"
style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }}
>
<ApartmentDescription isVisible={isDescVisible} />
<ApartmentDescription
isVisible={isDescVisible}
is3DTourAvailable={is3DTourAvailable}
/>
</div>
<div
className="absolute h-full right-0 w-full z-30 bg-[#F3F3F2] p-6 flex flex-col top-[56px] "
@@ -67,7 +71,7 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
<div className="leading-5">234 units</div>
</div>
</div>
<div className="px-4 py-[18px] bg-white flex gap-6 text-[#73787C] font-semibold text-caption-m rounded-lg mb-2">
<div className="px-4 py-[18px] bg-white flex gap-6 text-[#73787C] font-semibold text-caption-m rounded-2xl mb-2">
<div className="gap-2 flex items-center">
<div className="rounded-full bg-[#A19E9E] w-3 h-3"></div>
<p>Studio Flex</p>
@@ -90,7 +94,7 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
</div>
</div>
<div className="px-10 bg-white flex gap-6 font-semibold text-caption-m rounded-lg justify-center items-center flex-1 py-4">
<div className="px-10 bg-white flex gap-6 font-semibold text-caption-m rounded-2xl justify-center items-center flex-1 py-4">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
src/components/complexWingPage/SkygardenDescription.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ const SkygardenDescription = () => {
return (
<div className=" p-6">
<div
className={`bg-white rounded-lg p-6 flex flex-col gap-4 transition-all duration-300 ease-in-out absolute w-[364px] left-[414px] desc-shadow`}
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 transition-all duration-300 ease-in-out absolute w-[364px] left-[414px] desc-shadow`}
>
<div className="relative ">
<div className="flex justify-between border-b pb-4">
src/components/complexWingPage/SkygardenSidebar/SkygardenSidebar.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ const SkygardenSidebar = ({ onMouseEnter }: ISkygardenSidebarProps) => {
</div>
</div>
<div className="overflow-y-scroll py-6">
<div className="px-4 bg-white font-semibold text-caption-m rounded-lg justify-center items-center mb-4 pb-4 mx-6 flex flex-col gap-1 pt-4">
<div className="px-4 bg-white font-semibold text-caption-m rounded-2xl justify-center items-center mb-4 pb-4 mx-6 flex flex-col gap-1 pt-4">
<LayoutSlider />
</div>
<div className="grid grid-cols-3 gap-4 border-t pt-4 pb-4 mx-6">
src/components/favoritesPage/FavoriteApartmentCard.tsx
+21 -57
View File
@@ -2,8 +2,10 @@ import useModal from "../../store/useModal";
import { ILayoutCard } from "../../types/layoutCard";
import Button from "../Button";
import BookingIcon from "../icons/BookingIcon";
import CrossIcon from "../icons/CrossIcon";
import HeartIcon from "../icons/Heart";
import { SendEnquiryModal } from "../modals/SendEnquryModal";
import { MobileModalWrapper } from "../modals/mobile/MobileModalWrapper";
import SendEnquiryMobileModal from "../modals/mobile/SendEnquiryMobileModal";
interface FavoriteAppartmentCardProps {
card: ILayoutCard;
@@ -18,8 +20,17 @@ const FavoriteAppartmentCard = ({ card }: FavoriteAppartmentCardProps) => {
const handleOnSendEquiryClick = () => {
setModal(<SendEnquiryModal />);
};
const handleOnMobileSendEquiryClick = () => {
setModal(
<MobileModalWrapper>
<SendEnquiryMobileModal />
</MobileModalWrapper>
);
};
return (
<div className="bg-white flex flex-col p-4 rounded-lg gap-4 cursor-pointer select-none">
<div className="bg-white flex flex-col p-4 rounded-2xl gap-4 cursor-pointer select-none">
<div className="flex gap-4 justify-between">
<div className="flex gap-1 flex-col">
<p className="text-[#00BED7] text-s leading-5">
@@ -56,67 +67,20 @@ const FavoriteAppartmentCard = ({ card }: FavoriteAppartmentCardProps) => {
<Button
icon={<BookingIcon />}
text="Send Enquiry"
className="flex justify-center"
className="justify-center hidden lg:flex"
buttonType="cta"
onClick={handleOnSendEquiryClick}
/>
<Button
icon={<BookingIcon />}
text="Send Enquiry"
className="justify-center lg:hidden flex"
buttonType="cta"
onClick={handleOnMobileSendEquiryClick}
/>
</div>
</div>
);
};
const SendEnquiryModal = () => {
const { setModal } = useModal();
const handleOnModalClick = () => {
setModal(null);
};
return (
<div className="absolute z-50 top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-12 items-center">
<div className="h-full col-span-3 col-start-10 bg-[#F3F3F2] py-6 px-6 flex flex-col justify-between items-center">
<div className="flex flex-col gap-8 w-full">
<div className="flex justify-between pb-4 border-b border-[#E2E2DC] ">
<h2 className="text-subheadline-m font-semibold">
Apartment purchase enquiry
</h2>
<Button
buttonType="tertiary"
icon={<CrossIcon />}
onClick={handleOnModalClick}
/>
</div>
<div className="rounded-lg bg-white p-4 flex flex-col gap-4">
<div className="flex flex-col gap-1">
<p className="text-subheadline-s font-semibold text-[#0D1922]">
1 bedroom, 609 Sqft{" "}
</p>
<p className="text-subheadline-s font-semibold text-[#0D192266]">
AED 1,668,888
</p>
</div>
<div className="flex flex-col gap-1">
<p className="text-[#00BED7] text-s">1 bedroom, 609 Sqft </p>
<div className="flex gap-1 flex-col">
<div className="text-[#73787C] flex gap-2 items-center w-fit">
<p className="text-caption-m font-semibold leading-4">
East Wing
</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="text-caption-m font-semibold leading-4">
Floor 11
</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="text-caption-m font-semibold leading-4">
№ 213
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default FavoriteAppartmentCard;
src/components/favoritesPage/FavoriteCardList.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ interface FavoriteCardListProps {
const FavoriteCardList = ({ cards }: FavoriteCardListProps) => {
return (
<div className="grid grid-cols-4 gap-4">
<div className="grid lg:grid-cols-4 gap-4 grid-cols-2">
{cards.map((card) => (
<FavoriteAppartmentCard card={card} key={card.id} />
))}
src/components/favoritesPage/FavoriteSlider.tsx
+33 -18
View File
@@ -4,18 +4,45 @@ import FavoriteSliderCard from "./FavoriteSliderCard";
import Button from "../Button";
import RightArrowIcon from "../icons/RightArrowIcon";
import LeftArrowIcon from "../icons/LeftArrowIcon";
import { useSwipeable } from "react-swipeable";
interface FavoritesSliderProps {
cards: ILayoutCard[];
}
const cols = 4;
const FavoritesSlider = ({ cards }: FavoritesSliderProps) => {
const [offset, setOffset] = useState(0);
const cardRef = useRef<HTMLDivElement | null>(null);
const [cardWidth, setCardWidth] = useState(0);
const [buttonTopPos, setButtonTopPos] = useState(0);
const [cols, setCols] = useState(2);
const handlers = useSwipeable({
trackMouse: true,
onSwipedRight: () => handleOnLeftBtnClick(),
onSwipedLeft: () => handleOnRightBtnClick(),
});
const handleOnLeftBtnClick = () => {
if (0 > offset) {
setOffset((prev) => prev + 1);
}
};
const handleOnRightBtnClick = () => {
if (offset > -cards.length + cols + 1) {
setOffset((prev) => prev - 1);
}
};
useEffect(() => {
const screenWidth = window.innerWidth;
if (screenWidth >= 1024) {
setCols(4);
} else {
setCols(2);
}
}, [window.innerWidth]);
useEffect(() => {
const cardElement = cardRef.current;
@@ -27,22 +54,10 @@ const FavoritesSlider = ({ cards }: FavoritesSliderProps) => {
setCardWidth(width);
setButtonTopPos(_buttonTopPos);
}
}, []);
const handleOnLeftBtnClick = () => {
if (0 > offset) {
setOffset((prev) => prev + 1);
}
};
const handleOnRightBtnClick = () => {
if (offset > -cards.length + cols) {
setOffset((prev) => prev - 1);
}
};
}, [cardRef.current]);
return (
<div className="w-[calc(100vw - 48px)] relative">
<div className="w-[calc(100vw - 48px)] relative ">
<div
className="absolute -left-2 z-30"
style={{ top: `${buttonTopPos}px` }}
@@ -63,7 +78,7 @@ const FavoritesSlider = ({ cards }: FavoritesSliderProps) => {
onClick={handleOnRightBtnClick}
/>
</div>
<div className="w-full overflow-hidden">
<div className="w-full overflow-hidden" {...handlers}>
<div
className="transition-all ease-in-out duration-300"
style={{ transform: `translateX(${offset * cardWidth}px)` }}
@@ -73,7 +88,7 @@ const FavoritesSlider = ({ cards }: FavoritesSliderProps) => {
(_, index) => {
return (
<div
className="grid grid-cols-4 gap-4 w-[calc(100vw-48px)] h-fit"
className="grid lg:grid-cols-4 grid-cols-2 gap-4 w-[calc(100vw-48px)] h-fit"
key={index}
>
{cards
src/components/favoritesPage/FavoriteSliderCard.tsx
+7 -3
View File
@@ -10,17 +10,21 @@ interface FavoriteSliderCardProps {
const FavoriteSliderCard = ({ card, elementRef }: FavoriteSliderCardProps) => {
return (
<div className="rounded-lg flex flex-col overflow-clip gap-6">
<div className="rounded-ss-2xl rounded-se-2xl flex flex-col overflow-clip gap-6">
<div className="flex flex-col gap-4 bg-white p-4" ref={elementRef}>
<div className="flex justify-between">
<div className="flex text-subheadline-s font-semibold text-[#0D1922]">
<div className="flex text-subheadline-s font-semibold text-[#0D1922] select-none">
<h2>
{card.apartmentType}, {card.square} Sqft
</h2>
</div>
<Button buttonType="favorite" icon={<HeartIcon isFilled />} />
</div>
<img src="/images/layout-1.png" alt="" className="w-full" />
<img
src="/images/layout-1.png"
alt=""
className="w-full pointer-events-none select-none"
/>
</div>
<div className="flex flex-col gap-1 pb-6 border-b">
<p className="text-s text-[#73787C]">Price</p>
src/components/header/Auth/AuthDesktop.tsx
+7 -1
View File
@@ -1,5 +1,6 @@
import useModal from "../../../store/useModal";
import Button from "../../Button";
import AuthIcon from "../../icons/AuthIcon";
import LoginModal from "../../modals/LoginModal";
interface AuthProps {
@@ -30,7 +31,12 @@ const AuthDesktop = ({ isAuth, userName }: AuthProps) => {
</div>
</>
) : (
<Button buttonType="cta" text="Login" onClick={handleOnLoginBtnClick} />
<Button
buttonType="cta"
text="Login"
onClick={handleOnLoginBtnClick}
icon={<AuthIcon />}
/>
)}
</div>
);
src/components/header/Auth/AuthMobile.tsx
+7 -1
View File
@@ -1,4 +1,5 @@
import Button from "../../Button";
import AuthIcon from "../../icons/AuthIcon";
interface AuthProps {
isAuth: boolean;
@@ -17,7 +18,12 @@ const AuthMobile = ({ isAuth, userName }: AuthProps) => {
</div>
) : (
<div className="flex gap-4 text-black justify-center w-full items-center">
<Button buttonType="cta" text="Login" className="w-full" />
<Button
buttonType="cta"
text="Login"
icon={<AuthIcon />}
className="w-full justify-center"
/>
</div>
)}
</>
src/components/header/Header/DesktopHeader.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ const DesktopHeader = () => (
<Location />
</div>
<Navbar />
<Auth />
<Auth isAuth={false} />
</header>
);
src/components/icons/AuthIcon.tsx
+20
View File
@@ -0,0 +1,20 @@
const AuthIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="none"
viewBox="0 0 20 20"
>
<path
fill="currentColor"
fillRule="evenodd"
d="M6.458 16.667c0 .345.28.625.625.625h7.083A2.292 2.292 0 0016.459 15V5a2.292 2.292 0 00-2.291-2.292H7.082a.625.625 0 000 1.25h7.083c.576 0 1.042.467 1.042 1.042v10c0 .575-.466 1.042-1.042 1.042H7.083a.625.625 0 00-.625.625zm3.103-3.259a.625.625 0 00.884-.007l2.917-2.963a.625.625 0 000-.876l-2.917-2.963a.625.625 0 10-.89.877l1.87 1.899H4.166a.625.625 0 000 1.25h7.257l-1.87 1.9a.625.625 0 00.007.883z"
clipRule="evenodd"
></path>
</svg>
);
};
export default AuthIcon;
src/components/icons/VirtualTourIcon.tsx
+24
View File
@@ -0,0 +1,24 @@
const VirtualTourIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="none"
viewBox="0 0 20 20"
>
<path
fill="currentColor"
d="M7.332 13.334c1.204 0 1.946-.909 1.946-2.145s-.719-1.704-1.452-1.854l1.172-1.357a.823.823 0 00.195-.537c0-.427-.312-.774-.696-.774H6.096c-.307 0-.556.277-.556.618 0 .341.249.618.556.618h1.568L6.599 9.202a.77.77 0 00-.152.636l.004.019c.064.314.314.536.603.536.664 0 1.058.3 1.058.834 0 .505-.317.814-.765.814-.32 0-.584-.095-.823-.275-.294-.222-.699-.26-.945.024-.204.236-.227.61-.008.828.435.435 1.008.716 1.76.716zM9.603 11.971c0 .69.502 1.25 1.123 1.25h.985c1.698 0 2.872-1.432 2.872-3.277 0-1.863-1.174-3.277-2.872-3.277h-.985c-.62 0-1.123.56-1.123 1.25v4.054zm1.563-.051c-.207 0-.374-.187-.374-.417V8.385c0-.23.167-.417.374-.417h.545c.973 0 1.629.815 1.629 1.976 0 1.18-.656 1.976-1.63 1.976h-.544z"
></path>
<path
fill="currentColor"
fillRule="evenodd"
d="M2.083 9.167c.345 0 .625.28.625.625v.347a7.153 7.153 0 006.594 7.131l-.266-.266a.833.833 0 010-1.179l.295-.295 2.3 2.3a.417.417 0 01-.295.712H9.861a8.403 8.403 0 01-8.403-8.403v-.347c0-.345.28-.625.625-.625zM17.916 10.834a.625.625 0 01-.625-.625V9.86a7.153 7.153 0 00-6.594-7.13l.267.266a.833.833 0 010 1.178l-.295.295-2.3-2.3a.417.417 0 01.294-.712h1.476a8.403 8.403 0 018.402 8.403v.348c0 .345-.28.625-.625.625z"
clipRule="evenodd"
></path>
</svg>
);
};
export default VirtualTourIcon;
src/components/modals/MasterplanFilters.tsx
+43 -18
View File
@@ -10,28 +10,45 @@ import { ICheckbox } from "../../types/checkbox";
import { IMultirangeSlider } from "../../types/multirangeSlider";
import { ISwitcher } from "../../types/switcher";
import {
initialCheckboxes,
initialAparmentTypeCheckboxes,
initialSliders,
initialSwitchers,
initialViewCheckboxes,
} from "../../consts/initialMasterplanFilters";
const MasterplanFilters = () => {
const { setModal } = useModal();
const [checkboxes, setCheckboxes] = useState<ICheckbox[]>(initialCheckboxes);
const [apartmentTypeCheckbox, setAparmentTypeCheckboxes] = useState<
ICheckbox[]
>(initialAparmentTypeCheckboxes);
const [viewCheckboxes, setViewCheckboxes] = useState<ICheckbox[]>(
initialViewCheckboxes
);
const [sliders, setSliders] = useState<IMultirangeSlider[]>(initialSliders);
const [switchers, setSwitchers] = useState<ISwitcher[]>(initialSwitchers);
const handleOnCloseClick = () => setModal(null);
const handleOnCheckboxClick = (checkboxId: string) => {
const updatedCheckboxes = checkboxes.map((cbox) => {
const handleOnApartmentTypeCheckboxClick = (checkboxId: string) => {
const updatedCheckboxes = apartmentTypeCheckbox.map((cbox) => {
if (checkboxId !== cbox.id) return cbox;
const isSelected = !cbox.selected;
return { ...cbox, selected: isSelected };
});
setCheckboxes(updatedCheckboxes);
setAparmentTypeCheckboxes(updatedCheckboxes);
};
const handleOnViewCheckboxClick = (checkboxId: string) => {
const updatedCheckboxes = viewCheckboxes.map((cbox) => {
if (checkboxId !== cbox.id) return cbox;
const isSelected = !cbox.selected;
return { ...cbox, selected: isSelected };
});
setViewCheckboxes(updatedCheckboxes);
};
const handleOnSliderValueChange = (
@@ -63,33 +80,33 @@ const MasterplanFilters = () => {
};
const handleOnResetClick = () => {
setCheckboxes(initialCheckboxes);
setAparmentTypeCheckboxes(initialAparmentTypeCheckboxes);
setViewCheckboxes(initialViewCheckboxes);
setSliders(initialSliders);
setSwitchers(initialSwitchers);
};
return (
<div className="absolute z-[99999901] top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] items-center ">
<div className="h-full bg-[#F3F3F2] flex flex-col items-center justify-between w-[360px]">
<div className="h-screen bg-[#F3F3F2] flex flex-col items-center justify-between w-[360px] overflow-y-scroll">
<div className="w-full py-6 px-6 flex flex-col items-center">
<div className="flex justify-between border-b border-[#E2E2DC] w-full pb-4">
<h2 className="text-subheadline-m font-semibold">Filters</h2>
<Button
icon={<CrossIcon />}
buttonType="fab"
isCircleRounded
onClick={handleOnCloseClick}
/>
</div>
<div className="flex flex-col pt-6 w-full">
<p className="text-[#0D1922] text-m font-semibold pb-4">
Apartment type
</p>
<p className="text-[#0D1922] text-s pb-4">Apartment type</p>
<div className="flex flex-col gap-2">
{checkboxes.map((checkbox) => (
{apartmentTypeCheckbox.map((checkbox) => (
<Checkbox
checkbox={checkbox}
key={checkbox.id}
onClick={handleOnCheckboxClick}
onClick={handleOnApartmentTypeCheckboxClick}
/>
))}
</div>
@@ -98,12 +115,8 @@ const MasterplanFilters = () => {
{sliders.map((slider) => (
<div className="flex flex-col gap-2">
<div className="flex justify-between items-center">
<p className="text-[#0D1922] text-m font-semibold ">
{slider.title}
</p>
<p className="text-[#73787C] text-m font-semibold">
{slider.unit}
</p>
<p className="text-[#0D1922] text-s ">{slider.title}</p>
<p className="text-[#73787C] text-s">{slider.unit}</p>
</div>
<MultiRangeSlider
onChange={handleOnSliderValueChange}
@@ -121,6 +134,18 @@ const MasterplanFilters = () => {
))}
</div>
</div>
<div className="flex flex-col pt-6 w-full">
<p className="text-[#0D1922] text-s pb-4">View</p>
<div className="flex flex-col gap-2">
{viewCheckboxes.map((checkbox) => (
<Checkbox
checkbox={checkbox}
key={checkbox.id}
onClick={handleOnViewCheckboxClick}
/>
))}
</div>
</div>
</div>
<div className="w-full justify-items-end p-6 flex gap-2 justify-center bg-white rounded-se-2xl rounded-ss-2xl">
src/components/modals/SendEnquryModal.tsx
+95
View File
@@ -0,0 +1,95 @@
import useModal from "../../store/useModal";
import Button from "../Button";
import CrossIcon from "../icons/CrossIcon";
import MasterInput from "../MasterInput";
import MasterSelector from "../MasterSelector";
const SendEnquiryModal = () => {
const { setModal } = useModal();
const handleOnCloseClick = () => {
setModal(null);
};
return (
<div className="absolute z-[99999998] top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-12 items-center">
<div className="h-full col-span-3 col-start-10 bg-[#F3F3F2] py-6 px-6 flex flex-col justify-between items-center overflow-y-scroll">
<div className="flex flex-col w-full">
<div className="flex justify-between pb-4 border-b border-[#E2E2DC] ">
<h2 className="text-subheadline-m font-semibold">
Apartment purchase enquiry
</h2>
<Button
buttonType="tertiary"
icon={<CrossIcon />}
onClick={handleOnCloseClick}
/>
</div>
<div className="py-4 border-b">
<div className="rounded-lg bg-white p-4 flex flex-col gap-4">
<div className="flex flex-col gap-1">
<p className="text-subheadline-s font-semibold text-[#0D1922]">
1 bedroom, 609 Sqft{" "}
</p>
<p className="text-subheadline-s font-semibold text-[#0D192266]">
AED 1,668,888
</p>
</div>
<div className="flex flex-col gap-1">
<p className="text-[#00BED7] text-s">1 bedroom, 609 Sqft </p>
<div className="flex gap-1 flex-col">
<div className="text-[#73787C] flex gap-2 items-center w-fit">
<p className="text-caption-m font-semibold leading-4">
East Wing
</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="text-caption-m font-semibold leading-4">
Floor 11
</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="text-caption-m font-semibold leading-4">
№ 213
</p>
</div>
</div>
</div>
</div>
</div>
<h2 className="text-subheadline-s text-[#0D1922] font-semibold py-6">
Specify the client data to send the request
</h2>
<div className="flex flex-col gap-4 pb-4">
<MasterInput title="Name" isRequired={true} placeholder="Name" />
<MasterInput
title="Email"
isRequired={false}
placeholder="sample@mail.com"
/>
<MasterSelector title="Contact number" />
</div>
</div>
<div>
<div className="flex gap-4 border w-full">
<Button
onClick={handleOnCloseClick}
text="Cancel"
buttonType="cta"
className="w-full justify-center"
/>
<Button
text="Send"
buttonType="fab"
className="w-full justify-center"
/>
</div>
<p className="text-caption-m font-semibold text-[#0D192266] text-center pt-4">
By clicking on the “Send” button, you accept the privacy policy and
consent to the processing of personal data.
</p>
</div>
</div>
</div>
);
};
export { SendEnquiryModal };
src/components/modals/mobile/MasterplanFiltersModal.tsx
+38 -14
View File
@@ -9,16 +9,22 @@ import Switch from "../../Switch";
import ResetIcon from "../../icons/ResetIcon";
import { useSwipeable } from "react-swipeable";
import {
initialCheckboxes,
initialAparmentTypeCheckboxes,
initialSliders,
initialSwitchers,
initialViewCheckboxes,
} from "../../../consts/initialMasterplanFilters";
import { ICheckbox } from "../../../types/checkbox";
const MasterplanFiltersModal = () => {
const { setModal } = useModal();
const { setIsAnimate } = useContext(MobileModalWrapperContext);
const [apartmentTypeCheckboxes, setApartmentTypeCheckboxes] =
useState(initialCheckboxes);
const [apartmentTypeCheckboxes, setApartmentTypeCheckboxes] = useState<
ICheckbox[]
>(initialAparmentTypeCheckboxes);
const [viewCheckboxes, setViewCheckboxes] = useState<ICheckbox[]>(
initialViewCheckboxes
);
const [switchers, setSwitchers] = useState(initialSwitchers);
const [multirangeSliders, setMultirangeSliders] = useState(initialSliders);
const handlers = useSwipeable({
@@ -70,6 +76,17 @@ const MasterplanFiltersModal = () => {
setMultirangeSliders(updatedSliders);
};
const handleOnViewCheckboxClick = (checkboxId: string) => {
const updatedCheckboxes = viewCheckboxes.map((cbox) => {
if (checkboxId !== cbox.id) return cbox;
const isSelected = !cbox.selected;
return { ...cbox, selected: isSelected };
});
setViewCheckboxes(updatedCheckboxes);
};
const handleOnShowApartmentClick = () => {
if (setIsAnimate) {
setIsAnimate(false);
@@ -81,14 +98,15 @@ const MasterplanFiltersModal = () => {
};
const handleOnResetClick = () => {
setViewCheckboxes(initialViewCheckboxes);
setSwitchers(initialSwitchers);
setMultirangeSliders(initialSliders);
setApartmentTypeCheckboxes(initialCheckboxes);
setApartmentTypeCheckboxes(initialAparmentTypeCheckboxes);
};
return (
<div
className="bg-[#F3F3F2] rounded-ss-lg rounded-se-lg h-full p-6 flex flex-col gap-6"
className="bg-[#F3F3F2] rounded-ss-2xl rounded-se-2xl h-full p-6 flex flex-col gap-6"
{...handlers}
>
<div className="flex justify-between pb-6 border-b">
@@ -104,9 +122,7 @@ const MasterplanFiltersModal = () => {
/>
</div>
<div className="flex flex-col w-full">
<p className="text-[#0D1922] text-m font-semibold pb-4">
Apartment type
</p>
<p className="text-[#0D1922] text-s pb-4">Apartment type</p>
<div className="grid grid-cols-2 gap-2">
{apartmentTypeCheckboxes.map((checkbox) => (
<Checkbox
@@ -121,12 +137,8 @@ const MasterplanFiltersModal = () => {
{multirangeSliders.map((slider) => (
<div className="flex flex-col gap-3">
<div className="flex justify-between items-center">
<p className="text-[#0D1922] text-m font-semibold ">
{slider.title}
</p>
<p className="text-[#73787C] text-m font-semibold">
{slider.unit}
</p>
<p className="text-[#0D1922] text-s ">{slider.title}</p>
<p className="text-[#73787C] text-s">{slider.unit}</p>
</div>
<MultiRangeSlider
onChange={handleOnSliderValueChange}
@@ -143,6 +155,18 @@ const MasterplanFiltersModal = () => {
))}
</div>
</div>
<div className="flex flex-col w-full">
<p className="text-[#0D1922] text-s pb-4">Apartment type</p>
<div className="grid grid-cols-2 gap-2">
{viewCheckboxes.map((checkbox) => (
<Checkbox
checkbox={checkbox}
key={checkbox.id}
onClick={handleOnViewCheckboxClick}
/>
))}
</div>
</div>
<div className="flex justify-between">
<p className="text-[#00BED7] text-m">195 apartments found</p>
<Button
src/components/modals/mobile/MobileModalWrapper.tsx
+2 -2
View File
@@ -30,8 +30,8 @@ const MobileModalWrapper = ({ children }: MobileModalWrapperProps) => {
return (
<div
className={`h-screen w-screen pt-20 absolute z-[99999999] top-0 duration-300 ease-in-out ${
isAnimate ? "backdrop-blur-sm" : "backdrop-blur-none"
className={`h-screen w-screen pt-20 absolute z-[99999999] top-0 transition-all duration-300 ease-in-out ${
isAnimate ? "backdrop-blur-sm bg-[#0D192266]" : "backdrop-blur-none"
}`}
>
<div
src/components/modals/mobile/SendEnquiryMobileModal.tsx
+131
View File
@@ -0,0 +1,131 @@
import { useSwipeable } from "react-swipeable";
import Button from "../../Button";
import useModal from "../../../store/useModal";
import CrossIcon from "../../icons/CrossIcon";
import { useContext } from "react";
import { MobileModalWrapperContext } from "./MobileModalWrapper";
import MasterInput from "../../MasterInput";
import MasterSelector from "../../MasterSelector";
const SendEnquiryMobileModal = () => {
const { setModal } = useModal();
const { setIsAnimate } = useContext(MobileModalWrapperContext);
const handleOnCrossClick = () => {
if (setIsAnimate) {
setIsAnimate(false);
const timeout = setTimeout(() => {
setModal(null);
clearTimeout(timeout);
}, 300);
}
};
const handlers = useSwipeable({
onSwipedDown: () => handleOnCrossClick(),
});
return (
<div
className="bg-[#F3F3F2] rounded-ss-2xl rounded-se-2xl h-full p-6 flex flex-col"
{...handlers}
>
<div className="flex justify-between pb-6 border-b">
<h2 className="text-[#0D1922] text-subheadline-m font-semibold">
Apartment purchase enquiry
</h2>
<Button
buttonType="secondary"
isCircleRounded
icon={<CrossIcon />}
className="text-[#0D1922B2]"
onClick={handleOnCrossClick}
/>
</div>
<div className="py-6">
<div className="bg-white rounded-2xl p-6 grid grid-cols-8">
<div className="col-span-4 aspect-square">
<img src="/images/layout-1.png" alt="" className="w-full" />
</div>
<div className="col-span-4 flex flex-col justify-between">
<h2 className="text-[#0D1922] text-subheadline-s font-semibold">
Studio Flex, 607,08 Sqft
</h2>
<p className="text-s text-[#00BED7] pt-2">Rove Home Marasi Drive</p>
<div className="text-[#0D1922B2] text-caption-m font-semibold flex gap-2 items-center pt-1 border-b pb-4">
<p>East Wing</p>
<div className="w-1 h-1 rounded-full bg-[#E2E2DC]"></div>
<p>Floor 11</p>
<div className="w-1 h-1 rounded-full bg-[#E2E2DC]"></div>
<p>E-503</p>
</div>
<div className="flex flex-col gap-3 pt-4">
<div className="flex justify-between">
<p className="text-[#0D192266] text-m">Total Area</p>
<p className="text-m text-[#0D1922] text-right">607,08 Sqft</p>
</div>
<div className="flex justify-between">
<p className="text-[#0D192266] text-m">Suite Area</p>
<p className="text-m text-[#0D1922] text-right">485,67 Sqft</p>
</div>
<div className="flex justify-between">
<p className="text-[#0D192266] text-m">Balcony Area</p>
<p className="text-m text-[#0D1922] text-right">121,42 Sqft</p>
</div>
<div className="flex justify-between">
<p className="text-[#0D192266] text-m">Status</p>
<p className="text-m text-[#0D1922] text-right">Available</p>
</div>
<div className="flex justify-between">
<p className="text-[#0D192266] text-m">Parking Space</p>
<p className="text-m text-[#0D1922] text-right">1</p>
</div>
</div>
<p className="text-[#00BED7] font-semibold text-subheadline-s pt-6">
AED 1,668,888
</p>
</div>
</div>
</div>
<div className="grid grid-cols-8 gap-x-4 pb-4">
<h2 className="col-span-4 text-subheadline-s font-semibold">
Specify the client data to send the request
</h2>
<div className="col-span-4 col-start-1 pt-6">
<MasterInput title="Name" isRequired={true} placeholder="Name" />
</div>
<div className="col-span-4 pt-6">
<MasterInput
title="Email"
isRequired={false}
placeholder="sample@mail.com"
/>
</div>
<div className="col-span-4 pt-4">
<MasterSelector title="Contact number" />
</div>
</div>
<div>
<div className="flex gap-4 border-t w-full pt-4">
<Button
onClick={handleOnCrossClick}
text="Cancel"
buttonType="cta"
className="w-full justify-center"
/>
<Button
text="Send"
buttonType="fab"
className="w-full justify-center"
/>
</div>
<p className="text-caption-m font-semibold text-[#0D192266] text-center pt-4">
By clicking on the “Send” button, you accept the privacy policy and
consent to the processing of personal data.
</p>
</div>
</div>
);
};
export default SendEnquiryMobileModal;
src/components/searchApartment/ApartmentLayout.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ const ApartmentLayout = () => {
setCurrentLabel(label);
};
return (
<div className="p-10 pt-6 rounded-lg bg-white flex flex-col items-center gap-8 relative h-full">
<div className="p-10 pt-6 rounded-2xl bg-white flex flex-col items-center gap-8 relative h-full">
<div className="w-full xl:px-[304px] sm:px-24 h-full">
<img
className="w-full h-full object-cover"
src/components/searchApartment/ApartmentSidebar.tsx
+10 -3
View File
@@ -1,9 +1,15 @@
import { useNavigate } from "react-router-dom";
import Button from "../Button";
const ApartmentSidebar = () => {
const navigate = useNavigate();
const handleOn3DTourClick = () => {
navigate(`../virtual-tour/apartments-studio-1`);
};
return (
<div className="flex lg:flex-col gap-2 h-full">
<div className="rounded-lg overflow-clip lg:flex-1 flex-none relative">
<div className="rounded-2xl overflow-clip lg:flex-1 flex-none relative">
<p className="absolute top-[30px] left-6 font-semibold text-m text-white">
View from window
</p>
@@ -14,7 +20,7 @@ const ApartmentSidebar = () => {
/>
</div>
<div className="flex gap-2 flex-col flex-1 lg:flex-none">
<div className="flex flex-col rounded-lg bg-white p-6 gap-6 ">
<div className="flex flex-col rounded-2xl bg-white p-6 gap-6 ">
<h2 className="font-semibold text-[#0D1922] text-subheadline-s">
Parameters
</h2>
@@ -41,12 +47,13 @@ const ApartmentSidebar = () => {
</div>
</div>
</div>
<div className="rounded-lg bg-white flex flex-col p-6 gap-4 flex-1 lg:flex-none justify-between">
<div className="rounded-2xl bg-white flex flex-col p-6 gap-4 flex-1 lg:flex-none justify-between">
<p className="text-[#00BED7] font-semibold text-subheadline-s leading-7">
AED 1,668,888
</p>
<div className="flex gap-2">
<Button
onClick={handleOn3DTourClick}
text="3D Tour"
buttonType="secondary"
className="w-full flex justify-center"
src/components/searchApartment/SimilarAppartmentCard.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ const SimilarAppartmentCard = ({ layoutCard, elementRef }: LayoutCardProps) => {
return (
<div
ref={elementRef}
className="bg-white flex flex-col p-4 rounded-lg gap-4 cursor-pointer select-none touch-none"
className="bg-white flex flex-col p-4 rounded-2xl gap-4 cursor-pointer select-none touch-none"
onClick={handleOnClick}
>
<div className="flex gap-4 justify-between">
src/components/searchApartment/StudioDescriptionSection.tsx
+42
View File
@@ -0,0 +1,42 @@
const StudioDescriptionSection = () => {
return (
<section className="grid grid-cols-12 lg:gap-4 gap-3">
<div className="bg-white rounded-2xl lg:col-span-3 col-span-6 flex flex-col justify-between p-8">
<div className="flex flex-col">
<h2 className="text-[#0D1922] text-subheadline-l font-bold">
Studio flex
</h2>
<p className="text-[#00BED7] text-subheadline-s font-semibold">
Live in the future, today.
</p>
<div className="flex flex-col gap-[10px]">
<p className="text-m text-[#73787C]">
Live in the future, today. In Studio Flex explore the ORI Cloud
Bed, optimizing your living space with functionality and smart
living.
</p>
<p className="text-m text-[#73787C]">
Every inch is designed to provide more space for comfort and
convenience. This feature increase your unit size by 33%
</p>
</div>
</div>
<div className="flex flex-col gap-1">
<p className="text-[#0D1922B2] text-s">Up to 365,54 Sqft </p>
<p className="text-subheadline-s font-semibold text-[#00BED7]">
from AED 1,668,888
</p>
</div>
</div>
<div className="lg:col-span-9 rounded-2xl overflow-clip col-span-6">
<img
src="/images/searchApartment/StudioFlex.png"
alt=""
className="w-full object-cover h-full"
/>
</div>
</section>
);
};
export default StudioDescriptionSection;
src/components/searchPage/LayoutCard.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ const LayoutCard = ({ layoutCard }: LayoutCardProps) => {
return (
<div
className="bg-white flex flex-col p-4 rounded-lg gap-4 cursor-pointer select-none"
className="bg-white flex flex-col p-4 rounded-2xl gap-4 cursor-pointer select-none"
onClick={handleOnClick}
>
<div className="flex gap-4 justify-between">
src/consts/initialMasterplanFilters.ts
+16 -2
View File
@@ -31,16 +31,30 @@ const initialSliders: IMultirangeSlider[] = [
},
];
const initialCheckboxes: ICheckbox[] = [
const initialAparmentTypeCheckboxes: ICheckbox[] = [
{ title: "Studio Flex", id: "1", disabled: true, selected: false },
{ title: "Studio", id: "2", selected: false },
{ title: "1 Bedroom", id: "3", selected: false },
{ title: "2 Bedroom", id: "4", selected: false },
];
const initialViewCheckboxes: ICheckbox[] = [
{ title: "Burj Khalifa", id: "1", disabled: true, selected: false },
{ title: "Amenties", id: "2", selected: false },
{ title: "Downtown", id: "3", selected: false },
{ title: "Canal", id: "4", selected: false },
{ title: "Business Bay", id: "5", selected: false },
{ title: "Park", id: "6", selected: false },
];
const initialSwitchers: ISwitcher[] = [
{ id: "1", title: "Not the first floor", isSwitched: false },
{ id: "2", title: "Not the top floor", isSwitched: false },
];
export { initialCheckboxes, initialSliders, initialSwitchers };
export {
initialAparmentTypeCheckboxes,
initialSliders,
initialSwitchers,
initialViewCheckboxes,
};
src/index.css
+1
View File
@@ -82,6 +82,7 @@ html {
.mobile-subheadline-m {
}
.rubber-headline-indent {
text-indent: clamp(209px, -0.4197rem + 16.8396vw, 842px);
}
src/pages/SearchApartment.tsx
+5 -1
View File
@@ -3,11 +3,12 @@ import ButtonPanel from "../components/searchApartment/ButtonPanel";
import ApartmentLayout from "../components/searchApartment/ApartmentLayout";
import ApartmentSidebar from "../components/searchApartment/ApartmentSidebar";
import SimilarSlider from "../components/searchApartment/SimilarSlider";
import StudioDescriptionSection from "../components/searchApartment/StudioDescriptionSection";
const SearchApartment = () => {
return (
<div className="overflow-scroll h-screen w-screen pt-14">
<div className="grid grid-cols-9 border px-4 pt-6 pb-16 gap-4">
<div className="grid grid-cols-9 px-4 pt-6 pb-16 gap-4">
<div className="flex flex-col lg:col-span-7 col-span-full">
<ButtonPanel />
<ApartmentLayout />
@@ -15,6 +16,9 @@ const SearchApartment = () => {
<div className="lg:col-span-2 rounded-lg col-span-full">
<ApartmentSidebar />
</div>
<div className="col-span-full">
<StudioDescriptionSection />
</div>
<div className="col-span-full">
<SimilarSlider />
</div>