95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
import { formattedUnitTypes } from "../data/formattedUnitTypes";
|
|
import ArrowRightIcon from "./icons/ArrowRightIcon";
|
|
import HumanIcon from "./icons/HumanIcon";
|
|
import Button from "./ui/Button";
|
|
import { usePopupStore } from "../stores/usePopupStore";
|
|
|
|
interface UnitPopupProps {
|
|
unitType: string;
|
|
wing?: "East" | "West";
|
|
floor: number;
|
|
unitNumber: string;
|
|
squareFt: number;
|
|
suitesArea: number;
|
|
balconyArea: number;
|
|
price: number;
|
|
complexName: string;
|
|
}
|
|
|
|
function UnitPopup({
|
|
unitType,
|
|
wing,
|
|
floor,
|
|
unitNumber,
|
|
squareFt,
|
|
complexName,
|
|
}: UnitPopupProps) {
|
|
const { setPopup } = usePopupStore();
|
|
|
|
return (
|
|
<div className="flex flex-col 2xl:gap-y-[1.111vw] gap-y-4">
|
|
<div className="2xl:space-y-[0.833vw] space-y-3">
|
|
<div className="2xl:space-y-[0.556vw] space-y-2">
|
|
<p className="text-h5 font-medium">
|
|
{formattedUnitTypes.get(unitType)}
|
|
</p>
|
|
<div className="flex items-center 2xl:gap-[0.556vw] gap-2">
|
|
{wing && (
|
|
<>
|
|
<p className="text-caption-s opacity-70">{wing} Wing</p>
|
|
<div className="2xl:size-[0.278vw] size-1 rounded-full bg-[#E2E2DC]" />
|
|
</>
|
|
)}
|
|
<p className="text-caption-s opacity-70">Floor {floor}</p>
|
|
<div className="2xl:size-[0.278vw] size-1 rounded-full bg-[#E2E2DC]" />
|
|
<p className="text-caption-s opacity-70">{unitNumber}</p>
|
|
</div>
|
|
<div className="2xl:p-[0.208vw] p-[3px] 2xl:rounded-[0.278vw] rounded bg-[#30B216] bg-opacity-[8%] flex 2xl:gap-[0.278vw] gap-1 w-fit">
|
|
<span className="2xl:size-[0.833vw] size-3 text-[#30B216]">
|
|
<HumanIcon />
|
|
</span>
|
|
<p className="text-caption-s text-[#30B216]">Virtual Tour</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr className="2xl:h-[0.069vw] h-px border-[#E2E2DC]" />
|
|
<div className="flex flex-col 2xl:gap-[0.556vw] gap-2">
|
|
<div className="flex 2xl:gap-[0.556vw] gap-2 justify-between">
|
|
<p className="text-caption-m opacity-70">Total Area</p>
|
|
<p className="text-caption-m">{squareFt.toFixed(2)} Sqft</p>
|
|
</div>
|
|
{/* <div className="flex 2xl:gap-[0.556vw] gap-2 justify-between">
|
|
<p className="text-caption-m opacity-70">Suites Area</p>
|
|
<p className="text-caption-m">{suitesArea.toFixed(2)} Sqft</p>
|
|
</div>
|
|
<div className="flex 2xl:gap-[0.556vw] gap-2 justify-between">
|
|
<p className="text-caption-m opacity-70">Balcony Area</p>
|
|
<p className="text-caption-m">{balconyArea.toFixed(2)} Sqft</p>
|
|
</div> */}
|
|
</div>
|
|
{/* <p className="text-h5 font-medium text-[#00BED7]">
|
|
{`AED ${Intl.NumberFormat("ar-AE", {
|
|
currency: "AED",
|
|
minimumFractionDigits: 0,
|
|
}).format(price)}`}
|
|
</p> */}
|
|
<Button
|
|
variant="cta"
|
|
size="small"
|
|
className="2xl:hidden w-full"
|
|
onClick={() => {
|
|
window.open(`/complex/${complexName}/${unitNumber}`, "_blank");
|
|
setPopup(null);
|
|
}}
|
|
>
|
|
<span>Explore</span>
|
|
<span className="size-4 text-white">
|
|
<ArrowRightIcon />
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default UnitPopup;
|