From 453c287625d0437942a04f565bac9a8898fa4f53 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Wed, 12 Jun 2024 18:54:30 +0500
Subject: [PATCH] fxs

---
 .../modals/mobile/MasterplanFiltersModal.tsx  |  2 +-
 .../modals/mobile/SearchFiltersModal.tsx      | 27 +++++++++++
 src/components/searchPage/SidebarFilters.tsx  | 47 ++++++++++++++-----
 .../ApartmentCard.tsx                         | 12 +++--
 .../ApartmentSidebar.tsx                      | 47 +++++++++++--------
 src/store/useSearchFilters.ts                 |  6 +++
 6 files changed, 106 insertions(+), 35 deletions(-)

diff --git a/src/components/modals/mobile/MasterplanFiltersModal.tsx b/src/components/modals/mobile/MasterplanFiltersModal.tsx
index 182bee5..d8a45ba 100644
--- a/src/components/modals/mobile/MasterplanFiltersModal.tsx
+++ b/src/components/modals/mobile/MasterplanFiltersModal.tsx
@@ -156,7 +156,7 @@ const MasterplanFiltersModal = () => {
         </div>
       </div>
       <div className="flex flex-col w-full">
-        <p className="text-[#0D1922] text-s pb-4">Apartment type</p>
+        <p className="text-[#0D1922] text-s pb-4">Views</p>
         <div className="grid grid-cols-2 gap-2">
           {viewCheckboxes.map((checkbox) => (
             <Checkbox
diff --git a/src/components/modals/mobile/SearchFiltersModal.tsx b/src/components/modals/mobile/SearchFiltersModal.tsx
index 76de6bb..da92267 100644
--- a/src/components/modals/mobile/SearchFiltersModal.tsx
+++ b/src/components/modals/mobile/SearchFiltersModal.tsx
@@ -15,8 +15,12 @@ import {
   initialSliders,
   initialSwitchers,
 } from "../../../consts/initialSearchFilters";
+import { initialViewCheckboxes } from "../../../consts/initialMasterplanFilters";
 
 const SearchFiltersModal = () => {
+  // const [viewCheckboxes, setViewCheckboxes] = useState<ICheckbox[]>(
+  //   initialViewCheckboxes
+  // );
   const { setModal } = useModal();
   const { setIsAnimate } = useContext(MobileModalWrapperContext);
   const {
@@ -28,6 +32,8 @@ const SearchFiltersModal = () => {
     setApartmentTypeCheckboxes,
     roveHomeTypeCheckboxes,
     setRoveHomeTypeCheckboxes,
+    setViewCheckboxes,
+    viewCheckboxes,
   } = useSearchFilters();
   const handlers = useSwipeable({
     onSwipedDown: () => handleOnCrossClick(),
@@ -54,6 +60,17 @@ const SearchFiltersModal = () => {
     setApartmentTypeCheckboxes(updatedCheckboxes);
   };
 
+  const handleOnViewCheckboxClick = (checkboxId: string) => {
+    const updatedCheckboxes = viewCheckboxes.map((cbox) => {
+      if (checkboxId !== cbox.id) return cbox;
+      const isSelected = !cbox.selected;
+
+      return { ...cbox, selected: isSelected };
+    });
+
+    setViewCheckboxes(updatedCheckboxes);
+  };
+
   const handleOnCheckboxRoveHomeClick = (checkboxId: string) => {
     const updatedCheckboxes = roveHomeTypeCheckboxes.map((cbox) => {
       if (checkboxId !== cbox.id) return cbox;
@@ -101,6 +118,7 @@ const SearchFiltersModal = () => {
 
   const handleOnResetClick = () => {
     setMultirangeSliders(initialSliders);
+    setViewCheckboxes(initialViewCheckboxes);
     setApartmentTypeCheckboxes(initialApartmentTypeCheckboxes);
     setRoveHomeTypeCheckboxes(initialRoveHomeCheckboxes);
     setSwitchers(initialSwitchers);
@@ -175,6 +193,15 @@ const SearchFiltersModal = () => {
           ))}
         </div>
       </div>
+      <div className="grid grid-cols-2 gap-2">
+        {viewCheckboxes.map((checkbox) => (
+          <Checkbox
+            checkbox={checkbox}
+            key={checkbox.id}
+            onClick={handleOnViewCheckboxClick}
+          />
+        ))}
+      </div>
       <div className="flex justify-between">
         <p className="text-[#00BED7] text-m">195 apartments found</p>
         <Button
diff --git a/src/components/searchPage/SidebarFilters.tsx b/src/components/searchPage/SidebarFilters.tsx
index 3e4ced6..8e030ed 100644
--- a/src/components/searchPage/SidebarFilters.tsx
+++ b/src/components/searchPage/SidebarFilters.tsx
@@ -10,6 +10,9 @@ import {
   initialRoveHomeCheckboxes,
 } from "../../consts/initialSearchFilters";
 import useSearchFilters from "../../store/useSearchFilters";
+import { initialViewCheckboxes } from "../../consts/initialMasterplanFilters";
+import { useState } from "react";
+import { ICheckbox } from "../../types/checkbox";
 
 const SidebarFilters = () => {
   const {
@@ -23,6 +26,10 @@ const SidebarFilters = () => {
     setRoveHomeTypeCheckboxes,
   } = useSearchFilters();
 
+  const [viewCheckboxes, setViewCheckboxes] = useState<ICheckbox[]>(
+    initialViewCheckboxes
+  );
+
   const handleOnCheckboxApartmentClick = (checkboxId: string) => {
     const updatedCheckboxes = apartmentTypeCheckboxes.map((cbox) => {
       if (checkboxId !== cbox.id) return cbox;
@@ -69,7 +76,19 @@ const SidebarFilters = () => {
     setSwitchers(updatedSwitchers);
   };
 
+  const handleOnViewCheckboxClick = (checkboxId: string) => {
+    const updatedCheckboxes = viewCheckboxes.map((cbox) => {
+      if (checkboxId !== cbox.id) return cbox;
+      const isSelected = !cbox.selected;
+
+      return { ...cbox, selected: isSelected };
+    });
+
+    setViewCheckboxes(updatedCheckboxes);
+  };
+
   const handleOnResetClick = () => {
+    setViewCheckboxes(initialViewCheckboxes);
     setApartmentTypeCheckboxes(initialApartmentTypeCheckboxes);
     setRoveHomeTypeCheckboxes(initialRoveHomeCheckboxes);
     setMultirangeSliders(initialSliders);
@@ -90,9 +109,7 @@ const SidebarFilters = () => {
             />
           </div>
           <div className="flex flex-col pt-6 w-full">
-            <p className="text-[#0D1922] text-m font-semibold pb-4">
-              Rove Home
-            </p>
+            <p className="text-[#0D1922] text-s pb-4">Rove Home</p>
             <div className="flex flex-col gap-2">
               {roveHomeTypeCheckboxes.map((checkbox) => (
                 <Checkbox
@@ -104,9 +121,7 @@ const SidebarFilters = () => {
             </div>
           </div>
           <div className="flex flex-col pt-6 w-full">
-            <p className="text-[#0D1922] text-m font-semibold pb-4">
-              Apartment type
-            </p>
+            <p className="text-[#0D1922] text-s pb-4">Apartment type</p>
             <div className="flex flex-col gap-2">
               {apartmentTypeCheckboxes.map((checkbox) => (
                 <Checkbox
@@ -121,12 +136,8 @@ const SidebarFilters = () => {
             {multirangeSliders.map((slider) => (
               <div className="flex flex-col gap-2">
                 <div className="flex justify-between items-center">
-                  <p className="text-[#0D1922] text-m font-semibold ">
-                    {slider.title}
-                  </p>
-                  <p className="text-[#73787C] text-m font-semibold">
-                    {slider.unit}
-                  </p>
+                  <p className="text-[#0D1922] text-s ">{slider.title}</p>
+                  <p className="text-[#73787C] text-s">{slider.unit}</p>
                 </div>
                 <MultiRangeSlider
                   onChange={handleOnSliderValueChange}
@@ -143,6 +154,18 @@ const SidebarFilters = () => {
                 </div>
               ))}
             </div>
+            <div className="flex flex-col w-full">
+              <p className="text-[#0D1922] text-s pb-4">Views</p>
+              <div className="flex flex-col gap-2">
+                {viewCheckboxes.map((checkbox) => (
+                  <Checkbox
+                    checkbox={checkbox}
+                    key={checkbox.id}
+                    onClick={handleOnViewCheckboxClick}
+                  />
+                ))}
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/searchParticularApartmentsPage/ApartmentCard.tsx b/src/components/searchParticularApartmentsPage/ApartmentCard.tsx
index f9814bd..344db70 100644
--- a/src/components/searchParticularApartmentsPage/ApartmentCard.tsx
+++ b/src/components/searchParticularApartmentsPage/ApartmentCard.tsx
@@ -9,10 +9,10 @@ const ApartmentCard = () => {
   };
   return (
     <div
-      className="bg-white flex flex-col p-4 rounded-lg gap-4 cursor-pointer select-none"
+      className="bg-white flex flex-col p-4 rounded-2xl cursor-pointer select-none"
       onClick={handleOnCardClick}
     >
-      <div className="flex gap-4  justify-between">
+      <div className="flex gap-4 justify-between">
         <div className="flex gap-1 flex-col">
           <p className="text-[#00BED7] text-s leading-5">
             Rove Home Marasi Drive
@@ -31,9 +31,15 @@ const ApartmentCard = () => {
           isCircleRounded
         />
       </div>
-      <div className="w-full  aspect-square rounded-lg">
+      <div className="w-full  aspect-square rounded-lg pt-6">
         <img src="/images/layout-1.png" alt="" className="h-full" />
       </div>
+      <div className="flex flex-col gap-1 pt-6">
+        <p className="text-[#0D1922] text-s">Studio Flex, 607,08 Sqft</p>
+        <p className="text-[#00BED7] text-subheadline-s font-semibold">
+          AED 1,668,888
+        </p>
+      </div>
     </div>
   );
 };
diff --git a/src/components/searchParticularApartmentsPage/ApartmentSidebar.tsx b/src/components/searchParticularApartmentsPage/ApartmentSidebar.tsx
index ca79a72..dca12e9 100644
--- a/src/components/searchParticularApartmentsPage/ApartmentSidebar.tsx
+++ b/src/components/searchParticularApartmentsPage/ApartmentSidebar.tsx
@@ -11,7 +11,7 @@ const ApartmentSidebar = () => {
 
   return (
     <div>
-      <div className="h-full w-[360px] bg-[#F3F3F2]  flex flex-col items-center justify-between border-r lg:flex hidden">
+      <div className="h-full w-[360px] bg-[#F3F3F2] flex-col items-center justify-between border-r lg:flex hidden">
         <div className="w-full py-6 px-6 flex flex-col items-start">
           <div className="flex justify-between border-b border-[#E2E2DC] w-full pb-4 gap-4 items-center">
             <Button
@@ -23,25 +23,34 @@ const ApartmentSidebar = () => {
               1 bedroom apartment
             </h2>
           </div>
-          <div className="flex gap-1 flex-col pt-6">
-            <p className="text-[#00BED7] text-m leading-5">
-              Rove Home Marasi Drive
-            </p>
-            <div className="text-[#73787C] flex gap-2 items-center w-fit pt-1">
-              <p className="text-caption-m font-semibold leading-4">
-                East Wing
-              </p>
-              <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
-              <p className="text-caption-m font-semibold leading-4">
-                Floor 11-35
-              </p>
+          <div className="w-full pt-6">
+            <div className="bg-white w-full p-4 rounded-2xl">
+              <div className="flex gap-1 flex-col ">
+                <div className="flex justify-between">
+                  <p className="text-[#00BED7] text-s leading-5">
+                    Rove Home Marasi Drive
+                  </p>
+                  <div className="text-caption-m font-semibold text-white bg-[#00BED7] py-[3px] px-2 rounded-full">
+                    234 units
+                  </div>
+                </div>
+                <div className="text-[#73787C] flex gap-2 items-center w-fit pt-1">
+                  <p className="text-caption-m font-semibold leading-4">
+                    East Wing
+                  </p>
+                  <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
+                  <p className="text-caption-m font-semibold leading-4">
+                    Floor 11-35
+                  </p>
+                </div>
+                <p className="text-[#00BED7] text-subheadline-s font-bold pt-4">
+                  AED 1668888
+                </p>
+              </div>
+              <div className="w-full aspect-square mt-4 pb-4">
+                <img src="/images/layout-1.png" alt="" className="h-full" />
+              </div>
             </div>
-            <p className="text-[#00BED7] text-subheadline-s font-bold pt-4">
-              AED 1668888
-            </p>
-          </div>
-          <div className="w-full aspect-square mt-4 border-b pb-4">
-            <img src="/images/layout-1.png" alt="" className="h-full" />
           </div>
         </div>
       </div>
diff --git a/src/store/useSearchFilters.ts b/src/store/useSearchFilters.ts
index b92fe96..b01967d 100644
--- a/src/store/useSearchFilters.ts
+++ b/src/store/useSearchFilters.ts
@@ -8,10 +8,13 @@ import {
 } from "../consts/initialSearchFilters";
 import { IMultirangeSlider } from "../types/multirangeSlider";
 import { ISwitcher } from "../types/switcher";
+import { initialViewCheckboxes } from "../consts/initialMasterplanFilters";
 
 interface Store {
   apartmentTypeCheckboxes: ICheckbox[];
+  viewCheckboxes: ICheckbox[];
   setApartmentTypeCheckboxes: (typeCheckboxes: ICheckbox[]) => void;
+  setViewCheckboxes: (checkboxes: ICheckbox[]) => void;
   roveHomeTypeCheckboxes: ICheckbox[];
   setRoveHomeTypeCheckboxes: (typeCheckboxes: ICheckbox[]) => void;
   multirangeSliders: IMultirangeSlider[];
@@ -22,8 +25,11 @@ interface Store {
 
 const useSearchFilters = create<Store>((set) => ({
   apartmentTypeCheckboxes: initialApartmentTypeCheckboxes,
+  viewCheckboxes: initialViewCheckboxes,
   setApartmentTypeCheckboxes: (typeCheckboxes) =>
     set(() => ({ apartmentTypeCheckboxes: typeCheckboxes })),
+  setViewCheckboxes: (typeCheckboxes) =>
+    set(() => ({ viewCheckboxes: typeCheckboxes })),
   roveHomeTypeCheckboxes: initialRoveHomeCheckboxes,
   setRoveHomeTypeCheckboxes: (typeCheckboxes) =>
     set(() => ({ roveHomeTypeCheckboxes: typeCheckboxes })),