98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
import { formattedUnitTypes } from "../data/formattedUnitTypes";
|
|
import { FloorsData } from "./FloorSelect";
|
|
import HumanIcon from "./icons/HumanIcon";
|
|
|
|
interface NewFloorPopupProps {
|
|
title: string;
|
|
complexName: string;
|
|
data: FloorsData;
|
|
}
|
|
|
|
function NewFloorPopup({ title, complexName, data }: NewFloorPopupProps) {
|
|
return (
|
|
<div className="2xl:space-y-[0.556vw] space-y-2">
|
|
<div className="flex 2xl:gap-[0.556vw] gap-2">
|
|
<p className="font-medium text-h5">
|
|
{Number.isNaN(+title.split(" ").at(-1)!)
|
|
? title
|
|
: `${title.split(" ").at(-1)} floor`}
|
|
</p>
|
|
{!Number.isNaN(+title.split(" ").at(-1)!) && (
|
|
<p className="text-[#0D1922]/40 text-s">{title.split(" ")[0]} Wing</p>
|
|
)}
|
|
</div>
|
|
<div className="flex 2xl:gap-[0.278vw] gap-1">
|
|
<p className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#F3F3F2] 2xl:rounded-[0.278vw] rounded text-caption-s text-[#0D1922]/70">
|
|
{title && Number.isNaN(+title!.split(" ").at(-1)!)
|
|
? "16 Amenties"
|
|
: `${
|
|
complexName === "marasi-drive"
|
|
? data[
|
|
title.split(" ")[0] === "East"
|
|
? "East"
|
|
: title.split(" ")[0] === "West"
|
|
? "West"
|
|
: "others"
|
|
].totalUnits
|
|
: data.others.totalUnits
|
|
} apartments`}
|
|
</p>
|
|
{!Number.isNaN(+title.split(" ").at(-1)!) && (
|
|
<div className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#30B216]/8 2xl:rounded-[0.278vw] rounded flex 2xl:gap-[0.278vw] gap-1">
|
|
<span className="2xl:w-[0.833vw] 2xl:h-[0.833vw] w-3 h-3 text-[#30B216]">
|
|
<HumanIcon />
|
|
</span>
|
|
<p className="text-caption-s text-[#30B216]">Virtual Tour</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<hr className="border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
|
|
<div className="2xl:space-y-[0.556vw] space-y-2">
|
|
{!Number.isNaN(+title.split(" ").at(-1)!) ? (
|
|
<>
|
|
{Object.entries(
|
|
data[
|
|
title.split(" ")[0] === "East"
|
|
? "East"
|
|
: title.split(" ")[0] === "West"
|
|
? "West"
|
|
: "others"
|
|
].types
|
|
).map(([unitType, count]) => (
|
|
<div className="flex 2xl:gap-[0.556vw] gap-2" key={unitType}>
|
|
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
|
{count}
|
|
</p>
|
|
<p className="text-caption-m text-[#0D1922]/70">
|
|
{formattedUnitTypes.get(unitType)}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="flex 2xl:gap-[0.556vw] gap-2">
|
|
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
|
8
|
|
</p>
|
|
<p className="text-caption-m text-[#0D1922]/70">
|
|
Indoor Amenties
|
|
</p>
|
|
</div>
|
|
<div className="flex 2xl:gap-[0.556vw] gap-2">
|
|
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
|
8
|
|
</p>
|
|
<p className="text-caption-m text-[#0D1922]/70">
|
|
Outdoor Amenties
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default NewFloorPopup;
|