search current apartment page laptop

src/components/modals/mobile/SearchFiltersModal.tsx

@@ -3,12 +3,6 @@ import useModal from "../../../store/useModal";
 import Button from "../../Button";
 import CrossIcon from "../../icons/CrossIcon";
 import { MobileModalWrapperContext } from "./MobileModalWrapper";
-import {
-  initialApartmentTypeCheckboxes,
-  initialSliders,
-  initialSwitchers,
-  initialRoveHomeCheckboxes,
-} from "../../consts/initialSearchFilters";
 import useSearchFilters from "../../../store/useSearchFilters";
 import Checkbox from "../../Checkbox";
 import MultiRangeSlider from "../../MultiRangeSlider";

src/components/searchPage/SortButton.tsx

@@ -18,11 +18,11 @@ const SortButton = ({ sortList, onClick }: SortButtonProps) => {
   return (
     <div className="relative">
       <button
-        className="text-[#00BED7] text-m leading-5 flex gap-2"
+        className="text-[#00BED7] text-m leading-5 flex gap-2 items-center"
         onClick={handleOnClick}
       >
         Sort by{" "}
-        <div className="w-[17ch]">
+        <div>
           {sortList.find((sort) => sort.isSelected)?.title.toLocaleLowerCase()}{" "}
         </div>
         <div

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">
+      <div className="h-full w-[360px] bg-[#F3F3F2]  flex 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

src/components/searchParticularApartmentsPage/Units.tsx

@@ -5,12 +5,16 @@ import SearchIcon from "../icons/SearchIcon";
 import SortButton from "../searchPage/SortButton";
 import { sortCardBy } from "../../calc/sortCard";
 import ApartmentCard from "./ApartmentCard";
+import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
+import Button from "../Button";
+import { useNavigate } from "react-router-dom";
 
 const Units = () => {
   const [sortList, setSortList] = useState(initialSortList);
   const [cards, setCards] = useState(layoutsCards);
   const { roveHomeTypeCheckboxes, apartmentTypeCheckboxes, multirangeSliders } =
     useSearchFilters();
+  const navigate = useNavigate();
 
   const handleOnSortClick = (sortId: string) => {
     const updatedSortList = sortList.map((sort) => {
@@ -20,6 +24,10 @@ const Units = () => {
     setSortList(updatedSortList);
   };
 
+  const handleOnBackClick = () => {
+    navigate(-1);
+  };
+
   useEffect(() => {
     const sortedCards = sortCardBy(sortList, layoutsCards);
 
@@ -32,13 +40,49 @@ const Units = () => {
   ]);
   return (
     <section className="w-full p-6 flex flex-col">
-      <div className="flex justify-between w-full items-center border-b pb-4">
+      <div className="justify-between w-full items-center border-b pb-4 hidden lg:flex">
         <div className="flex gap-4 font-semibold text-subheadline-s leading-7 py-[6px]">
           <h2 className="text-[#0D1922]">Units</h2>
           <p className="text-[#73787C]">145</p>
         </div>
         <SortButton sortList={sortList} onClick={handleOnSortClick} />
       </div>
+      <div className="lg:hidden flex justify-between pb-4 border-b">
+        <div className="flex gap-4">
+          <Button
+            icon={<LeftArrowSliderIcon />}
+            buttonType="cta"
+            onClick={handleOnBackClick}
+          />
+          <div className="flex flex-col gap-1">
+            <p className="text-subheadline-s font-semibold text-[#0D1922]">
+              1 bedroom, 609 Sqft{" "}
+            </p>
+            <div className="flex gap-2 items-center">
+              <p className="text-[#0D1922B2] text-caption-s font-semibold">
+                Rove Home Marasi Drive
+              </p>
+              <div className="bg-[#E2E2DC] rounded-full w-1 h-1"></div>
+              <p className="text-[#0D1922B2] text-caption-s font-semibold">
+                East Wing
+              </p>
+              <div className="bg-[#E2E2DC] rounded-full w-1 h-1"></div>
+              <p className="text-[#0D1922B2] text-caption-s font-semibold">
+                Floor 11-35
+              </p>
+            </div>
+          </div>
+        </div>
+        <p className="text-[#00BED7] text-subheadline-s font-semibold">
+          AED 1,668,888
+        </p>
+      </div>
+      <div className="lg:hidden flex justify-start py-4 border-b gap-6">
+        <div className="bg-[#00BED7] rounded-full text-white py-[3px] px-2 text-caption-m flex items-center">
+          36 units
+        </div>
+        <SortButton sortList={sortList} onClick={handleOnSortClick} />
+      </div>
       <div className="grid 2xl:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4 pt-6">
         {cards.map(() => (
           <ApartmentCard />