zojgame/IRTH
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

wing + filter

Browse Source
This commit is contained in:
zojgame
2024-06-24 19:18:39 +05:00
parent b1bd436ab7
commit a651ab552e
31 changed files with 1572 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/complexWingPage/FloorDescription.tsx
+36 -81
View File
@@ -1,84 +1,19 @@
import useWingSidebar from "../../store/useWingSidebar";
import { IAparmentRes } from "../../types/apartmentsRes";
import { IDesctiptionFloor } from "../../types/descriptionFloor";
interface FloorDescriptionProps {
descriptionFloor: IDesctiptionFloor | null;
floorApartments: IAparmentRes[];
}
const FloorDescription = ({ descriptionFloor }: FloorDescriptionProps) => {
const FloorDescription = ({
descriptionFloor,
floorApartments,
}: FloorDescriptionProps) => {
const { isSidebar } = useWingSidebar();
return (
<>
{/* <div
className={`bg-white rounded-lg p-6 flex flex-col gap-4 w-[364px] absolute transition-opacity duration-300 delay-100 ${
isSidebar && descriptionFloor?.wing === "West Wing"
? "opacity-0"
: "opacity-0"
}`}
>
<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">
234 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">21</p>
</div>
<p className="text-s text-[#73787C] w-full">Studio Flex</p>
</div>
<p className="text-s text-[#0D1922]">AED 1,048,888</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">
56
</p>
</div>
<p className="text-s text-[#73787C]">Studio</p>
</div>
<p className="text-s text-[#0D1922]">AED 1,138,888</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">
89
</p>
</div>
<p className="text-s text-[#73787C]">1 Bedroom</p>
</div>
<p className="text-s text-[#0D1922]">AED 1,668,888</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">
10
</p>
</div>
<p className="text-s text-[#73787C]">2 Bedroom, Type A</p>
</div>
<p className="text-s text-[#0D1922]">AED 2,408,888</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 rotate-90 absolute top-0 -right-[35px]"></div>
</div>
</div> */}
<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 && descriptionFloor?.wing === "West Wing"
@@ -99,51 +34,71 @@ const FloorDescription = ({ descriptionFloor }: FloorDescriptionProps) => {
</p>
</div>
<div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white justify-start self-start">
234 units
{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">21</p>
<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]">AED 1,048,888</p>
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</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">
56
{
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]">AED 1,138,888</p>
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</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">
89
{
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]">AED 1,668,888</p>
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</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">
10
{
floorApartments.filter(
(apart) => apart.Unit_Type === "2 BR Squared"
).length
}
</p>
</div>
<p className="text-s text-[#73787C]">2 Bedroom, Type A</p>
<p className="text-s text-[#73787C] text-nowrap">
2 Bedroom, Type A
</p>
</div>
<p className="text-s text-[#0D1922]">AED 2,408,888</p>
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</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 -rotate-90 absolute top-0 -left-[35px]"></div>