current apartment search page

src/components/searchApartment/ApartmentLayout.tsx

@@ -13,9 +13,13 @@ const ApartmentLayout = () => {
     setCurrentLabel(label);
   };
   return (
-    <div className="p-10 pt-6 rounded-lg bg-white flex flex-col items-center gap-8 relative">
-      <div className="w-full px-[304px] ">
-        <img className="w-full " src="/images/layout-1.png" alt="" />
+    <div className="p-10 pt-6 rounded-lg bg-white flex flex-col items-center gap-8 relative h-full">
+      <div className="w-full xl:px-[304px] sm:px-24 h-full">
+        <img
+          className="w-full h-full object-cover"
+          src="/images/layout-1.png"
+          alt=""
+        />
       </div>
       <img
         src="/images/compass.png"

src/components/searchApartment/ApartmentSidebar.tsx

@@ -2,10 +2,9 @@ import Button from "../Button";
 
 const ApartmentSidebar = () => {
   return (
-    <div className="flex flex-col gap-2  h-full">
-      <div className="rounded-lg overflow-clip flex-1 relative">
+    <div className="flex lg:flex-col gap-2 h-full">
+      <div className="rounded-lg overflow-clip lg:flex-1 flex-none relative">
         <p className="absolute top-[30px] left-6 font-semibold text-m text-white">
-          <div className="w-1/2 border-t absolute -top-[5px]"></div>
           View from window
         </p>
         <img
@@ -14,48 +13,50 @@ const ApartmentSidebar = () => {
           className="w-full h-full object-cover"
         />
       </div>
-      <div className="flex flex-col rounded-lg bg-white p-6 gap-6 ">
-        <h2 className="font-semibold text-[#0D1922] text-subheadline-s">
-          Parameters
-        </h2>
-        <div className="flex flex-col gap-3">
-          <div className="flex justify-between text-m">
-            <p className="text-[#73787C]">Complex</p>
-            <p className="text-[#0D1922]">ROVE Home Marasi Drive</p>
-          </div>
-          <div className="flex justify-between text-m">
-            <p className="text-[#73787C]">Section</p>
-            <p className="text-[#0D1922]">East Wing</p>
-          </div>
-          <div className="flex justify-between text-m">
-            <p className="text-[#73787C]">Floor</p>
-            <p className="text-[#0D1922]">11</p>
-          </div>
-          <div className="flex justify-between text-m">
-            <p className="text-[#73787C]">Number</p>
-            <p className="text-[#0D1922]">213</p>
-          </div>
-          <div className="flex justify-between text-m">
-            <p className="text-[#73787C]">Size</p>
-            <p className="text-[#0D1922]">609 Sqft</p>
+      <div className="flex gap-2 flex-col flex-1 lg:flex-none">
+        <div className="flex flex-col rounded-lg bg-white p-6 gap-6 ">
+          <h2 className="font-semibold text-[#0D1922] text-subheadline-s">
+            Parameters
+          </h2>
+          <div className="flex flex-col gap-3">
+            <div className="flex justify-between text-m">
+              <p className="text-[#73787C]">Complex</p>
+              <p className="text-[#0D1922]">ROVE Home Marasi Drive</p>
+            </div>
+            <div className="flex justify-between text-m">
+              <p className="text-[#73787C]">Section</p>
+              <p className="text-[#0D1922]">East Wing</p>
+            </div>
+            <div className="flex justify-between text-m">
+              <p className="text-[#73787C]">Floor</p>
+              <p className="text-[#0D1922]">11</p>
+            </div>
+            <div className="flex justify-between text-m">
+              <p className="text-[#73787C]">Number</p>
+              <p className="text-[#0D1922]">213</p>
+            </div>
+            <div className="flex justify-between text-m">
+              <p className="text-[#73787C]">Size</p>
+              <p className="text-[#0D1922]">609 Sqft</p>
+            </div>
           </div>
         </div>
-      </div>
-      <div className="rounded-lg bg-white flex flex-col p-6 gap-4">
-        <p className="text-[#00BED7] font-semibold text-subheadline-s leading-7">
-          AED 1,668,888
-        </p>
-        <div className="flex gap-2">
-          <Button
-            text="3D Tour"
-            buttonType="secondary"
-            className="w-full flex justify-center"
-          />
-          <Button
-            text="Send Enquiry"
-            buttonType="cta"
-            className="w-full flex justify-center"
-          />
+        <div className="rounded-lg bg-white flex flex-col p-6 gap-4 flex-1 lg:flex-none justify-between">
+          <p className="text-[#00BED7] font-semibold text-subheadline-s leading-7">
+            AED 1,668,888
+          </p>
+          <div className="flex gap-2">
+            <Button
+              text="3D Tour"
+              buttonType="secondary"
+              className="w-full flex justify-center"
+            />
+            <Button
+              text="Send Enquiry"
+              buttonType="cta"
+              className="w-full flex justify-center"
+            />
+          </div>
         </div>
       </div>
     </div>

src/components/searchApartment/SimilarAppartmentCard.tsx

@@ -27,7 +27,7 @@ const SimilarAppartmentCard = ({ layoutCard, elementRef }: LayoutCardProps) => {
   return (
     <div
       ref={elementRef}
-      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-lg gap-4 cursor-pointer select-none touch-none"
       onClick={handleOnClick}
     >
       <div className="flex gap-4  justify-between">

src/components/searchApartment/SimilarSlider.tsx

@@ -1,26 +1,26 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { useLayoutEffect, useRef, useState } from "react";
 import { layoutsCards } from "../../consts/initialSearchPage";
 import SimilarAppartmentCard from "./SimilarAppartmentCard";
 import Button from "../Button";
 import RightArrowIcon from "../icons/RightArrowIcon";
+import { useSwipeable } from "react-swipeable";
 
-const cols = 4;
+const desktopCols = 4;
+const laptopCols = 2;
 
 const SimilarSlider = () => {
   const [cards, setCards] = useState(layoutsCards);
   const [offset, setOffset] = useState(0);
   const cardRef = useRef<HTMLDivElement | null>(null);
   const [cardWidth, setCardWidth] = useState(0);
+  const [cols, setCols] = useState(laptopCols);
 
-  useLayoutEffect(() => {
-    const cardElement = cardRef.current;
-    if (cardElement) {
-      const gap = 16;
-      const width = cardElement.clientWidth + gap;
-      setCardWidth(width);
-    }
-  }, []);
+  const handlers = useSwipeable({
+    onSwipedLeft: () => handleOnRightBtnClick(),
+    onSwipedRight: () => handleOnLeftBtnClick(),
+  });
 
   const handleOnLeftBtnClick = () => {
     if (0 > offset) {
@@ -29,7 +29,7 @@ const SimilarSlider = () => {
   };
 
   const handleOnRightBtnClick = () => {
-    if (offset > -cards.length + cols) {
+    if (offset > -cards.length + desktopCols) {
       setOffset((prev) => prev - 1);
     }
     // if (offset === -cards.length + cols) {
@@ -39,13 +39,28 @@ const SimilarSlider = () => {
     // }
   };
 
+  useLayoutEffect(() => {
+    const cardElement = cardRef.current;
+    if (cardElement) {
+      const gap = 16;
+      const width = cardElement.clientWidth + gap;
+      setCardWidth(width);
+    }
+  }, [window.innerWidth]);
+
+  useLayoutEffect(() => {
+    const width = window.innerWidth;
+    const _cols = width < 1024 ? laptopCols : desktopCols;
+    setCols(_cols);
+  }, [window.innerWidth]);
+
   return (
     <>
       <div className="flex justify-between pt-10 pb-4">
         <h2 className="text-[#0D1922] font-semibold text-subheadline-m">
           Similar
         </h2>
-        <div className="flex gap-2">
+        <div className="flex gap-2 ">
           <Button
             isCircleRounded
             onClick={handleOnLeftBtnClick}
@@ -61,20 +76,20 @@ const SimilarSlider = () => {
           />
         </div>
       </div>
-      <div className="border-t border-b py-4">
-        <div className="w-[100vw-16px] overflow-hidden">
+      <div className="border-t border-b py-4" {...handlers}>
+        <div className="w-[100vw-16px] overflow-hidden ">
           <div
             className={`transition-transform duration-300 ease-in-out`}
             style={{
               transform: `translateX(${offset * cardWidth}px)`,
             }}
           >
-            <div className="flex w-fit gap-4">
+            <div className="flex w-fit gap-4 ">
               {Array.from({ length: Math.floor(cards.length / cols) }).map(
                 (_, index) => {
                   return (
                     <div
-                      className="grid grid-cols-4 gap-4 w-[calc(100vw-48px)] h-fit"
+                      className="grid lg:grid-cols-4 grid-cols-2 gap-4 w-[calc(100vw-48px)] h-fit"
                       key={index}
                     >
                       {cards

src/pages/SearchApartment.tsx

@@ -8,14 +8,14 @@ const SearchApartment = () => {
   return (
     <div className="overflow-scroll h-screen w-screen pt-14">
       <div className="grid grid-cols-9 border px-4 pt-6 pb-16 gap-4">
-        <div className="flex flex-col col-span-7">
+        <div className="flex flex-col lg:col-span-7 col-span-full">
           <ButtonPanel />
           <ApartmentLayout />
         </div>
-        <div className="col-span-2 rounded-lg">
+        <div className="lg:col-span-2 rounded-lg col-span-full">
           <ApartmentSidebar />
         </div>
-        <div className="col-span-9">
+        <div className="col-span-full">
           <SimilarSlider />
         </div>
       </div>