87 lines
3.1 KiB
TypeScript
87 lines
3.1 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 lg:flex-col gap-2 h-full">
|
|
<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>
|
|
<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 lg:flex-none">
|
|
<div className="flex flex-col rounded-2xl bg-white p-6 gap-6 ">
|
|
<h2 className="font-semibold text-[#0D1922] text-subheadline-s">
|
|
Parameters
|
|
</h2>
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex justify-between text-m">
|
|
<p className="text-[#73787C]">Complex</p>
|
|
<p className="text-[#0D1922]">{currentApartment.Project_Name}</p>
|
|
</div>
|
|
<div className="flex justify-between text-m">
|
|
<p className="text-[#73787C]">Section</p>
|
|
<p className="text-[#0D1922]">{wing}</p>
|
|
</div>
|
|
<div className="flex justify-between text-m">
|
|
<p className="text-[#73787C]">Floor</p>
|
|
<p className="text-[#0D1922]">{currentApartment.Floor}</p>
|
|
</div>
|
|
<div className="flex justify-between text-m">
|
|
<p className="text-[#73787C]">Number</p>
|
|
<p className="text-[#0D1922]">{unitNo}</p>
|
|
</div>
|
|
<div className="flex justify-between text-m">
|
|
<p className="text-[#73787C]">Size</p>
|
|
<p className="text-[#0D1922]">
|
|
{Number(currentApartment.Total_Area_Sqft).toFixed(2)} Sqft
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p className="text-[#00BED7] font-semibold text-subheadline-s leading-7">
|
|
Unavailable
|
|
{/* AED {formatNumber(1668888, ",", 3, 1)} */}
|
|
</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
|
|
text="Send Enquiry"
|
|
buttonType="cta"
|
|
className="w-full flex justify-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ApartmentSidebar;
|