116 lines
4.7 KiB
TypeScript
116 lines
4.7 KiB
TypeScript
import useWingSidebar from "../../store/useWingSidebar";
|
|
import { IAparmentRes } from "../../types/apartmentsRes";
|
|
import { IDesctiptionFloor } from "../../types/descriptionFloor";
|
|
|
|
interface FloorDescriptionProps {
|
|
descriptionFloor: IDesctiptionFloor | null;
|
|
floorApartments: IAparmentRes[];
|
|
isLeft: boolean;
|
|
}
|
|
|
|
const FloorDescription = ({
|
|
descriptionFloor,
|
|
floorApartments,
|
|
isLeft,
|
|
}: FloorDescriptionProps) => {
|
|
const { isSidebar } = useWingSidebar();
|
|
return (
|
|
<>
|
|
<div
|
|
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[364px] absolute left-[414px] transition-opacity duration-300 desc-shadow ${
|
|
isSidebar ? "opacity-0" : "opacity-100"
|
|
}`}
|
|
>
|
|
<div className="relative">
|
|
<div className="flex justify-between border-b pb-4">
|
|
<div className="flex flex-col">
|
|
<p
|
|
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out`}
|
|
>
|
|
{descriptionFloor?.floor} Floor
|
|
</p>
|
|
<p className="text-[#73787C] font-semibold text-caption-m">
|
|
{descriptionFloor?.wing}
|
|
</p>
|
|
</div>
|
|
<div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white justify-start self-start">
|
|
{floorApartments.length} units
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-4 pt-4">
|
|
<div className="flex items-center justify-between gap-8">
|
|
<div className="flex gap-2 items-center">
|
|
<div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
|
<p className="p-1 flex justify-center items-center">
|
|
{
|
|
floorApartments.filter(
|
|
(apart) => apart.Unit_Type === "Studio Flex"
|
|
).length
|
|
}
|
|
</p>
|
|
</div>
|
|
<p className="text-s text-[#73787C] w-full">Studio Flex</p>
|
|
</div>
|
|
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-8">
|
|
<div className="flex gap-2 items-center">
|
|
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
|
<p className="h-full w-full flex justify-center items-center">
|
|
{
|
|
floorApartments.filter(
|
|
(apart) => apart.Unit_Type === "Studio Squared"
|
|
).length
|
|
}
|
|
</p>
|
|
</div>
|
|
<p className="text-s text-[#73787C]">Studio</p>
|
|
</div>
|
|
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-8">
|
|
<div className="flex gap-2 items-center">
|
|
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
|
<p className="h-full w-full flex justify-center items-center">
|
|
{
|
|
floorApartments.filter(
|
|
(apart) => apart.Unit_Type === "1 BR Squared"
|
|
).length
|
|
}
|
|
</p>
|
|
</div>
|
|
<p className="text-s text-[#73787C]">1 Bedroom</p>
|
|
</div>
|
|
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
|
</div>
|
|
<div className="flex items-center justify-between gap-8">
|
|
<div className="flex gap-2 items-center">
|
|
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
|
|
<p className="h-full w-full flex justify-center items-center">
|
|
{
|
|
floorApartments.filter(
|
|
(apart) => apart.Unit_Type === "2 BR Squared"
|
|
).length
|
|
}
|
|
</p>
|
|
</div>
|
|
<p className="text-s text-[#73787C] text-nowrap">
|
|
2 Bedroom, Type A
|
|
</p>
|
|
</div>
|
|
<p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white absolute top-0 ${
|
|
!isLeft ? "-left-[35px] -rotate-90" : "-right-[35px] rotate-90"
|
|
} `}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default FloorDescription;
|