From c51332ee038f5e463c059a69ee2232ce126ec62a Mon Sep 17 00:00:00 2001
From: Moaz Dawalibi <moaz.dawalibi@sdnone.net>
Date: Sat, 22 Jun 2024 14:45:28 +0300
Subject: [PATCH] single products swiper

---
 src/Components/Products/ProductSlider.tsx | 42 +++++++++++++++++++++++
 src/Pages/Product/Page.tsx                | 18 +++-------
 src/Styles/Page/Product.scss              | 38 +++++++++++++-------
 3 files changed, 73 insertions(+), 25 deletions(-)
 create mode 100644 src/Components/Products/ProductSlider.tsx

diff --git a/src/Components/Products/ProductSlider.tsx b/src/Components/Products/ProductSlider.tsx
new file mode 100644
index 0000000..af79bf0
--- /dev/null
+++ b/src/Components/Products/ProductSlider.tsx
@@ -0,0 +1,42 @@
+// import Swiper core and required modules
+import { Navigation, A11y } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+// Import Swiper styles
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/scrollbar";
+import CustomImage from "../../ui/CustomImage";
+
+const ProductSlider = (data:any) => {
+
+  const handelImage = (item: any) => {
+    // setMainImage(item);
+  };
+  return (
+    <div className="product_images_swiper">
+      <Swiper
+        modules={[Navigation, A11y]}
+        spaceBetween={10}
+        slidesPerView={4}
+        navigation
+      >
+        {data?.images?.map(({item,index}:any)=>{
+            return (
+              <SwiperSlide key={index}>
+                <span key={index}  onClick={() => handelImage(item?.path)} >
+                  <CustomImage
+                    className="product_multi_image"
+                    src={item?.path}
+                    alt=""
+                  />
+              </span>
+            </SwiperSlide>
+            )
+          })}
+      </Swiper>
+    </div>
+  );
+};
+export default ProductSlider;
diff --git a/src/Pages/Product/Page.tsx b/src/Pages/Product/Page.tsx
index 9a4cf63..51e7e70 100644
--- a/src/Pages/Product/Page.tsx
+++ b/src/Pages/Product/Page.tsx
@@ -20,6 +20,7 @@ import { toast } from "react-toastify";
 import { FaCartPlus } from "react-icons/fa";
 import { useCartState } from "../../state/CartState";
 import useAuthState from "../../state/AuthState";
+import ProductSlider from "../../Components/Products/ProductSlider";
 
 const Page = () => {
   
@@ -98,7 +99,7 @@ const Page = () => {
       </header>
       <main>
         <div className="Product_left">
-          <span>
+          <span className="Product_left_container">
             <div className="fav_icon">
               <IoHeartOutline 
                 onClick={() => handelChangeFavorite(product)}
@@ -110,22 +111,13 @@ const Page = () => {
             </div>
             <CustomImage src={MainImage ?? product?.main_photo} alt="" />
             <div className="gallery_product">
-              {product?.images?.map((item,index)=>{
-                return (
-                  <span key={index}  onClick={() => handelImage(item?.path)} >
-                  <CustomImage
-                    src={item?.path}
-                    alt=""
-                  />
-                </span>
-                )
-              })}
-              <span>
+              <ProductSlider data={product}/>
+              {/* <span>
                 <img
                   onClick={() => handelImage('/Home/p1.png')}
                   alt=""
                 />
-              </span>
+              </span> */}
             </div>
           </span>
          
diff --git a/src/Styles/Page/Product.scss b/src/Styles/Page/Product.scss
index 5987119..bcb8a55 100644
--- a/src/Styles/Page/Product.scss
+++ b/src/Styles/Page/Product.scss
@@ -31,7 +31,8 @@
         }
       }
     }
-    > span {
+    .Product_left_container {
+      width: 100%;
       display: flex;
       flex-direction: column;
       gap: 20px;
@@ -46,19 +47,10 @@
         &::-webkit-scrollbar {
           display: none;
         }
-        span {
-          padding: 10px 15px;
-          border: 2px solid rgba(128, 128, 128, 0.1);
-          width: 100%;
-          > img {
-            width: 100%;
-            cursor: pointer;
-          }
-        }
+      
       }
     } 
   }
-
   .Product_info {
       display: flex;
       flex-direction: column;
@@ -76,7 +68,7 @@
           display: flex;
           align-items: flex-start;
           gap: 20px;
-          width: 80%;
+          width: 100%;
           padding: 10px 15px 0px 15px;
           &:nth-child(odd){
             background: var(--whiteOpacity) !important;
@@ -95,6 +87,28 @@
         }
       }
     }
+
+
+  .product_images_swiper{
+    width: 100%;
+    .swiper-button-prev:after, .swiper-button-next:after{
+      color: var(--text);
+      font-size: 25px;
+      background: #fff;
+      padding: 4px;
+      border-radius: 4px;
+    }
+    .swiper-backface-hidden .swiper-slide{
+      padding-inline: 20px;
+      min-width: 50px !important;
+    }
+    > span{
+      width: 50px;
+    }
+      .product_multi_image{
+        width: 50px !important;
+      }
+    }
 }
 .Product_Right{
   width: 50%;