125 lines
4.7 KiB
TypeScript
125 lines
4.7 KiB
TypeScript
import { useNavigate } from "react-router-dom";
|
|
import Button from "./Button";
|
|
// import { formatNumber } from "../calc/formatNumber";
|
|
import { IAparmentRes } from "../types/apartmentsRes";
|
|
|
|
interface ApartmentSidebarProps {
|
|
currentApartment: IAparmentRes;
|
|
}
|
|
|
|
const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
|
|
const navigate = useNavigate();
|
|
// const unitNo = currentApartment.Unit_No.split("-")[1];
|
|
const wing =
|
|
currentApartment.Unit_No.split("-")[0] === "E" ? "East Wing" : "West Wing";
|
|
|
|
const handleOn3DTourClick = () => {
|
|
navigate(`../virtual-tour/${currentApartment.id}`);
|
|
};
|
|
|
|
return (
|
|
<div className="flex gap-2 w-full ">
|
|
<div className="rounded-2xl overflow-clip flex-none relative w-1/2">
|
|
<div className="absolute top-[67.5px] left-6 flex flex-col">
|
|
<p className=" font-semibold text-[33.75px] text-white">
|
|
View from window
|
|
</p>
|
|
<p className=" font-semibold text-[56.25px] text-white">
|
|
Burj Khalifa
|
|
</p>
|
|
</div>
|
|
<img
|
|
src="/images/view_from_window.png"
|
|
alt=""
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2 flex-col flex-1 w-1/2 aspect-square">
|
|
<div className="flex flex-col rounded-2xl bg-white p-6 h-full">
|
|
<h2 className="text-[56.25px] text-[#0D1922] font-semibold leading-[78.75px]">
|
|
{currentApartment.Unit_Type}, {currentApartment.Total_Area_Sqft}{" "}
|
|
Sqft
|
|
</h2>
|
|
<p className="text-[39.2px] text-[#00BED7] font-normal leading-[55.12px] pt-[22.5px]">
|
|
{currentApartment.Project_Name}
|
|
</p>
|
|
<div className="flex gap-2 items-center pt-1 pb-4 border-b">
|
|
<p className="text-[#0D1922B2] font-semibold text-[33.75px] ">
|
|
{wing}
|
|
</p>
|
|
<div className="bg-[#E2E2DC] w-[11.25px] h-[11.25px] rounded-full"></div>
|
|
<p className="text-[#0D1922B2] font-semibold text-[33.75px] ">
|
|
Floor {currentApartment.Floor}
|
|
</p>
|
|
<div className="bg-[#E2E2DC] w-[11.25px] h-[11.25px] rounded-full"></div>
|
|
<p className="text-[#0D1922B2] font-semibold text-[33.75px] ">
|
|
{currentApartment.Unit_No}
|
|
</p>
|
|
</div>
|
|
<div className="pt-6 flex flex-col gap-3">
|
|
<div className="flex justify-between">
|
|
<p className="text-[#0D192266] text-[45px] leading-[56.25px]">
|
|
Total Area
|
|
</p>
|
|
<p className="text-[#0D1922] text-[45px] leading-[56.25px]">
|
|
{currentApartment.Total_Area_Sqft} Sqft
|
|
</p>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<p className="text-[#0D192266] text-[45px] leading-[56.25px]">
|
|
Suite Area
|
|
</p>
|
|
<p className="text-[#0D1922] text-[45px] leading-[56.25px]">
|
|
{currentApartment.Suite_Area_Sqft} Sqft
|
|
</p>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<p className="text-[#0D192266] text-[45px] leading-[56.25px]">
|
|
Balcony Area
|
|
</p>
|
|
<p className="text-[#0D1922] text-[45px] leading-[56.25px]">
|
|
{currentApartment.Balcony_Area_Sqft} Sqft
|
|
</p>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<p className="text-[#0D192266] text-[45px] leading-[56.25px]">
|
|
Status
|
|
</p>
|
|
<p className="text-[#0D1922] text-[45px] leading-[56.25px]">
|
|
{currentApartment.Property_Status}
|
|
</p>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<p className="text-[#0D192266] text-[45px] leading-[56.25px]">
|
|
Parking Space
|
|
</p>
|
|
<p className="text-[#0D1922] text-[45px] leading-[56.25px]">1</p>
|
|
</div>
|
|
</div>
|
|
<p className="pt-6 font-semibold text-subheadline-s text-[#00BED7] mt-auto">
|
|
Unavailable
|
|
</p>
|
|
</div>
|
|
<div className="rounded-2xl bg-white flex flex-col p-6 gap-4 flex-1 lg:flex-none justify-between">
|
|
<div className="flex gap-2">
|
|
<Button
|
|
onClick={handleOn3DTourClick}
|
|
text="3D Tour"
|
|
buttonType="secondary"
|
|
className="w-full flex justify-center"
|
|
/>
|
|
<Button
|
|
disabled
|
|
text="Send Enquiry"
|
|
buttonType="cta"
|
|
className="w-full flex justify-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ApartmentSidebar;
|