From a9cde500166e0ee776aa25dff9cfa9e8d29e8095 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Wed, 22 May 2024 18:52:02 +0500
Subject: [PATCH] similar slider

---
 .../complexWingPage/SequenceWing.tsx          |   4 +-
 .../searchApartment/SimilarAppartmentCard.tsx |  63 +++++++++++
 .../searchApartment/SimilarSlider.tsx         | 105 ++++++++++++++++++
 src/pages/SearchApartment.tsx                 |   6 +-
 4 files changed, 175 insertions(+), 3 deletions(-)
 create mode 100644 src/components/searchApartment/SimilarAppartmentCard.tsx
 create mode 100644 src/components/searchApartment/SimilarSlider.tsx

diff --git a/src/components/complexWingPage/SequenceWing.tsx b/src/components/complexWingPage/SequenceWing.tsx
index a382fd0..9ba6b39 100644
--- a/src/components/complexWingPage/SequenceWing.tsx
+++ b/src/components/complexWingPage/SequenceWing.tsx
@@ -148,7 +148,7 @@ const SequenceWing = () => {
   }, [isSidebar]);
 
   return (
-    <div className="absolute left-0 overflow-hidden h-screen w-screen ">
+    <div className="absolute left-0 overflow-hidden h-screen w-screen select-none pointer-events-none">
       <div
         className=" absolute h-[calc(100vh-56px)] right-0 w-1/2 duration-300 transition-all "
         style={{ right: `${isFloorSidebar ? "0" : "-50%"}` }}
@@ -216,7 +216,7 @@ const SequenceWing = () => {
           width={`${width}px`}
           height={`${width}px`}
           src="/images/sequenceWing.jpg"
-          className={`absolute z-10 duration-300 transition-opacity ease-in-out opacity-100`}
+          className={`absolute z-10 duration-300 transition-opacity ease-in-out opacity-100 select-none`}
           alt=""
         />
         <svg
diff --git a/src/components/searchApartment/SimilarAppartmentCard.tsx b/src/components/searchApartment/SimilarAppartmentCard.tsx
new file mode 100644
index 0000000..b1f7f4f
--- /dev/null
+++ b/src/components/searchApartment/SimilarAppartmentCard.tsx
@@ -0,0 +1,63 @@
+import { useNavigate } from "react-router-dom";
+import { ILayoutCard } from "../../types/layoutCard";
+
+interface LayoutCardProps {
+  layoutCard: ILayoutCard;
+  elementRef: React.MutableRefObject<HTMLDivElement | null>;
+}
+
+const SimilarAppartmentCard = ({ layoutCard, elementRef }: LayoutCardProps) => {
+  const {
+    floorEnd,
+    floorStart,
+    apartmentType,
+    roveHome,
+    wing,
+    units,
+    square,
+    cost,
+    id,
+  } = layoutCard;
+  const navigate = useNavigate();
+
+  const handleOnClick = () => {
+    navigate(`${id}`);
+  };
+
+  return (
+    <div
+      ref={elementRef}
+      className="bg-white flex flex-col p-4 rounded-lg gap-4 cursor-pointer select-none"
+      onClick={handleOnClick}
+    >
+      <div className="flex gap-4  justify-between">
+        <div className="flex gap-1 flex-col">
+          <p className="text-[#00BED7] text-s leading-5">
+            Rove Home {roveHome}
+          </p>
+          <div className="text-[#73787C] flex gap-2 items-center w-fit">
+            <p className="text-caption-m font-semibold leading-4">{wing}</p>
+            <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
+            <p className="text-caption-m font-semibold leading-4">
+              Floor {floorStart}-{floorEnd}
+            </p>
+          </div>
+        </div>
+        <div className="bg-[#00BED7] text-white text-caption-m font-semibold rounded-full py-[3px] px-2 self-start text-nowrap">
+          {units} units
+        </div>
+      </div>
+      <div className="w-full  aspect-square rounded-lg">
+        <img src="/images/layout-1.png" alt="" className="h-full" />
+      </div>
+      <div className="flex flex-col">
+        <p className="text[#0D1922] text-s">
+          {apartmentType}, {square} Sqft
+        </p>
+        <p className="text-[#00BED7] text-m font-bold">AED {cost}</p>
+      </div>
+    </div>
+  );
+};
+
+export default SimilarAppartmentCard;
diff --git a/src/components/searchApartment/SimilarSlider.tsx b/src/components/searchApartment/SimilarSlider.tsx
new file mode 100644
index 0000000..34af41c
--- /dev/null
+++ b/src/components/searchApartment/SimilarSlider.tsx
@@ -0,0 +1,105 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { layoutsCards } from "../../consts/initialSearchPage";
+import LayoutCard from "../searchPage/LayoutCard";
+import SimilarAppartmentCard from "./SimilarAppartmentCard";
+import Button from "../Button";
+import RightArrowIcon from "../icons/RightArrowIcon";
+
+const SimilarSlider = () => {
+  const [cards, setCards] = useState(layoutsCards.slice(0, 4));
+  const [offset, setOffset] = useState(0);
+  const sliderRef = useRef<HTMLDivElement | null>(null);
+  const cardRef = useRef<HTMLDivElement | null>(null);
+  const [sliderHeight, setSliderHeight] = useState(0);
+  const [cardWidth, setCardWidth] = useState(0);
+
+  useLayoutEffect(() => {
+    const sliderElement = sliderRef.current;
+    if (sliderElement) {
+      const height = sliderElement.clientHeight;
+      setSliderHeight(height);
+    }
+    const cardElement = cardRef.current;
+    if (cardElement) {
+      const gap = 16;
+      const width = cardElement.clientWidth + gap;
+      setCardWidth(width);
+    }
+  }, []);
+
+  useEffect(() => {
+    console.log("offset", offset);
+
+    return () => {};
+  }, [offset]);
+
+  const handleOnLeftBtnClick = () => {
+    if (0 < offset) {
+      setOffset((prev) => prev + 1);
+    }
+  };
+
+  const handleOnRightBtnClick = () => {
+    // if (0 > offset) {
+    setOffset((prev) => prev - 1);
+    // }
+  };
+
+  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">
+          <Button
+            onClick={handleOnLeftBtnClick}
+            icon={<RightArrowIcon />}
+            buttonType="fab"
+            className="rotate-180"
+          />
+          <Button
+            icon={<RightArrowIcon />}
+            onClick={handleOnRightBtnClick}
+            buttonType="fab"
+          />
+        </div>
+      </div>
+      <div className="border-t border-b py-4">
+        <div className="w-[100vw-16px] overflow-hidden">
+          <div
+            className={` relative transition-transform duration-300 ease-in-out`}
+            style={{
+              height: sliderHeight,
+              transform: `translateX(${offset * cardWidth}px)`,
+            }}
+          >
+            <div className="flex w-fit gap-4 absolute left-0 top-0">
+              <div
+                className="grid grid-cols-4 gap-4 w-[calc(100vw-32px)] h-fit"
+                ref={sliderRef}
+              >
+                {cards.map((layoutsCard) => (
+                  <SimilarAppartmentCard
+                    elementRef={cardRef}
+                    layoutCard={layoutsCard}
+                  />
+                ))}
+              </div>
+              <div className="grid grid-cols-4 gap-4 w-[calc(100vw-32px)]">
+                {cards.map((layoutsCard) => (
+                  <SimilarAppartmentCard
+                    elementRef={cardRef}
+                    layoutCard={layoutsCard}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SimilarSlider;
diff --git a/src/pages/SearchApartment.tsx b/src/pages/SearchApartment.tsx
index a40d12f..2db4402 100644
--- a/src/pages/SearchApartment.tsx
+++ b/src/pages/SearchApartment.tsx
@@ -2,11 +2,12 @@ import Footer from "../components/Footer";
 import ButtonPanel from "../components/searchApartment/ButtonPanel";
 import ApartmentLayout from "../components/searchApartment/ApartmentLayout";
 import ApartmentSidebar from "../components/searchApartment/ApartmentSidebar";
+import SimilarSlider from "../components/searchApartment/SimilarSlider";
 
 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-4 gap-4">
+      <div className="grid grid-cols-9 border px-4 pt-6 pb-16 gap-4">
         <div className="flex flex-col col-span-7">
           <ButtonPanel />
           <ApartmentLayout />
@@ -14,6 +15,9 @@ const SearchApartment = () => {
         <div className="col-span-2 rounded-lg">
           <ApartmentSidebar />
         </div>
+        <div className="col-span-9">
+          <SimilarSlider />
+        </div>
       </div>
       <Footer />
     </div>