From b24c60e8bf5aa42af5e41c258c21709187080d40 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Tue, 23 Apr 2024 18:13:06 +0500
Subject: [PATCH] slider

---
 src/components/Button.tsx                     |  3 ++
 .../companyPage/OurValues/OurValues.tsx       |  2 +-
 .../companyPage/OurValues/Slider.tsx          | 46 +++++++++++++++----
 src/components/map/Map.tsx                    |  4 +-
 src/components/map/Marker.tsx                 |  2 +-
 src/index.css                                 |  5 +-
 6 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 6c71813..dabeeae 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -10,6 +10,7 @@ interface ButtonProps {
   icon?: React.ReactNode;
   text?: string;
   className?: string;
+  onClick?: () => void;
 }
 
 const Button = ({
@@ -17,6 +18,7 @@ const Button = ({
   icon,
   text,
   buttonType = "primary",
+  onClick,
 }: ButtonProps) => {
   const backgroundColor = backgroundColors[buttonType];
   const backgroundHoverColor = backgroundHoverColors[buttonType];
@@ -24,6 +26,7 @@ const Button = ({
 
   return (
     <button
+      onClick={onClick}
       className={`min-w-[40px] ${
         icon && !text ? "p-[10px]" : "py-3 px-6"
       }  transition-[background] duration-300 ease-in-out rounded-lg text-s ${backgroundColor} ${backgroundHoverColor} ${textColor} ${
diff --git a/src/components/companyPage/OurValues/OurValues.tsx b/src/components/companyPage/OurValues/OurValues.tsx
index 57facb6..1846857 100644
--- a/src/components/companyPage/OurValues/OurValues.tsx
+++ b/src/components/companyPage/OurValues/OurValues.tsx
@@ -107,7 +107,7 @@ const OurValues = () => {
             its strategic abode within the iconic masterpiece, The Opus,
             envisioned by the architectural virtuoso Zaha Hadid.
           </div>
-          <div className="2xl:col-span-4 2xl:col-start-1 xl:col-start-1 xl:col-span-5 col-span-6 text-[#73787C] text-s">
+          <div className="2xl:col-span-4 2xl:col-start-1 xl:col-start-1 xl:col-span-5 col-span-6 text-[#73787C] text-s pb-6">
             This exceptional location mirrors our commitment to being at the
             forefront of innovation and design, reflecting the very essence of
             our brand. Just as The Opus stands as a testament to architectural
diff --git a/src/components/companyPage/OurValues/Slider.tsx b/src/components/companyPage/OurValues/Slider.tsx
index e05a2e0..47a8fdf 100644
--- a/src/components/companyPage/OurValues/Slider.tsx
+++ b/src/components/companyPage/OurValues/Slider.tsx
@@ -4,6 +4,7 @@ import { useLayoutEffect, useRef, useState } from "react";
 import Button from "../../Button";
 import RightArrowIcon from "../../icons/RightArrowIcon";
 import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon";
+import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
 
 const images: Image[] = [
   { id: "1", src: "./images/company/slider/1.png" },
@@ -11,8 +12,16 @@ const images: Image[] = [
   { id: "3", src: "./images/company/slider/3.png" },
 ];
 
+const getGapOffset = (screenWidth: number) => {
+  if (screenWidth > 1600) return 16;
+  if (screenWidth > 1280) return 12;
+  if (screenWidth > 640) return 8;
+  return 16;
+};
+
 const Slider = () => {
   const [selectedImageIndex, setSelectedImageIndex] = useState(-1);
+  const [rightImageOffset, setRightImageOffset] = useState("");
   const [imageWidth, setImageWidth] = useState(0);
   const imageRef = useRef<HTMLImageElement>(null);
 
@@ -20,7 +29,20 @@ const Slider = () => {
     if (!imageRef.current?.src) return;
     const width = imageRef.current.clientWidth;
     setImageWidth(width);
-  }, [imageRef]);
+  }, [imageRef, window.innerWidth]);
+
+  useLayoutEffect(() => {
+    const screenWidth = window.innerWidth;
+    const gapOffset = getGapOffset(screenWidth);
+
+    const _rightImageOffset =
+      screenWidth > 1280
+        ? `${"calc(clamp(315px, 6.9317rem + 17.0319vw, 420px)"} + ${
+            selectedImageIndex * (imageWidth + gapOffset)
+          }px)`
+        : `${selectedImageIndex * imageWidth}px`;
+    setRightImageOffset(_rightImageOffset);
+  }, [imageWidth, selectedImageIndex, window.innerWidth]);
 
   const handlers = useSwipeable({
     onSwipedLeft: next,
@@ -40,15 +62,13 @@ const Slider = () => {
 
   return (
     <div
-      className="relative col-span-full overflow-x-hidden"
+      className="relative col-span-full overflow-x-hidden "
       style={{ height: "clamp(30rem, 12.6318rem + 21.6933vw, 75rem)" }}
     >
       <div
-        className="flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out"
+        className={`flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out select-none xl:px-0 px-4`}
         style={{
-          right: `calc(clamp(315px, 6.5317rem + 16.4319vw, 420px) + ${
-            selectedImageIndex * imageWidth
-          }px)`,
+          right: `${rightImageOffset}`,
         }}
         {...handlers}
       >
@@ -58,14 +78,20 @@ const Slider = () => {
             src={image.src}
             alt=""
             key={image.id}
-            className="rounded-2xl aspect-[6/5] object-cover 2xl:w-[calc(100vw*1/2)] xl:w-[calc(100vw*5/12)]"
+            className="rounded-2xl aspect-[6/5] object-cover 2xl:w-[calc(100vw*1/2)] xl:w-[calc(100vw*5/12)] pointer-events-none select-none"
           />
         ))}
       </div>
-      {/* <Button
+      <Button
+        onClick={prev}
         icon={<LeftArrowSliderIcon />}
-        className="top-0 slider-offset absolute text-[#73787C]"
-      /> */}
+        className="absolute text-[#73787C] top-[calc(50%-22px)] xl:left-slider-btn-offset left-4"
+      />
+      <Button
+        onClick={next}
+        icon={<RightArrowSliderIcon />}
+        className="absolute text-[#73787C] top-[calc(50%-22px)] right-6"
+      />
     </div>
   );
 };
diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx
index ee1f9bd..5bd333c 100644
--- a/src/components/map/Map.tsx
+++ b/src/components/map/Map.tsx
@@ -34,9 +34,7 @@ const Map = () => {
       //   }}
     >
       <TransformComponent
-        wrapperClass={`${
-          isMobile ? "h-screen" : "h-[calc(100vh-60px)]"
-        } w-screen`}
+        wrapperClass={`${isMobile ? "h-screen" : "h-[calc(100vh-62.39px)]"}`}
       >
         <ImageMarker
           src="images/Map.jpg"
diff --git a/src/components/map/Marker.tsx b/src/components/map/Marker.tsx
index 5851ab2..ccf2e8a 100644
--- a/src/components/map/Marker.tsx
+++ b/src/components/map/Marker.tsx
@@ -18,7 +18,7 @@ const Marker = (props: MarkerComponentProps) => {
   };
 
   return (
-    <div className="relative">
+    <div className="relative ">
       <div
         className={`flex items-end absolute w-[108px] top-[22px] right-[72px] transition-all duration-300 ease-in-out ${
           hoveredMarker &&
diff --git a/src/index.css b/src/index.css
index 6be675e..b1ec76f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -67,8 +67,7 @@ body {
     text-indent: clamp(209px, -0.4197rem + 16.8396vw, 842px);
   }
 
-  .slider-offset {
-    /* left: clamp(315px, 6.5317rem + 16.4319vw, 281px); */
-    left: clamp(315px, 6.5317rem + 16.4319vw, 420px);
+  .left-slider-btn-offset {
+    left: clamp(220px, -0.6587rem + 17.9969vw, 400px);
   }
 }