128 lines
4.7 KiB
TypeScript
128 lines
4.7 KiB
TypeScript
import { useSwipeable } from "react-swipeable";
|
|
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";
|
|
import Button3 from "../../Button3";
|
|
|
|
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>
|
|
<Button3
|
|
variant="secondary"
|
|
icon={<CrossIcon />}
|
|
className="text-[#0D1922B2]"
|
|
roundedFull
|
|
onClick={handleOnCrossClick}
|
|
/>
|
|
</div>
|
|
<div className="py-6">
|
|
<div className="grid grid-cols-8 p-6 bg-white rounded-2xl">
|
|
<div className="col-span-4 aspect-square">
|
|
<img src="/images/layout-1.png" alt="" className="w-full" />
|
|
</div>
|
|
<div className="flex flex-col justify-between col-span-4">
|
|
<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">
|
|
{/* Unavailable */}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-8 pb-4 gap-x-4">
|
|
<h2 className="col-span-4 font-semibold text-subheadline-s">
|
|
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 w-full gap-4 pt-4 border-t">
|
|
<Button3
|
|
className="justify-center w-full"
|
|
onClick={handleOnCrossClick}
|
|
>
|
|
Cancel
|
|
</Button3>
|
|
<Button3 className="justify-center w-full">Send</Button3>
|
|
</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;
|