From 4b14e9ec3176b8b3e6c4a9aea967888a91ab4c02 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sun, 15 Dec 2024 22:47:27 +0330
Subject: [PATCH] added buttons

---
 .../global/product-detail/RelatedProducts.vue | 59 ++++++++++++-------
 1 file changed, 38 insertions(+), 21 deletions(-)

diff --git a/frontend/components/global/product-detail/RelatedProducts.vue b/frontend/components/global/product-detail/RelatedProducts.vue
index 4644bc3..728f45e 100644
--- a/frontend/components/global/product-detail/RelatedProducts.vue
+++ b/frontend/components/global/product-detail/RelatedProducts.vue
@@ -13,51 +13,68 @@ type Props = {
 
 defineProps<Props>();
 
+// state
+
+const swiper_instance = ref<SwiperClass | null>(null);
+
 // methods
 
 const onSwiper = (swiper: SwiperClass) => {
-    console.log(swiper);
-};
-const onSlideChange = () => {
-    console.log("slide change");
+    swiper_instance.value = swiper;
 };
 </script>
 
 <template>
-    <div class="w-full flex flex-col gap-[4rem] py-[5rem]">
+    <div class="w-full flex flex-col gap-[4rem] py-[5rem] container">
         <div class="w-full flex justify-between items-center">
+            <span class="text-black typo-h-3">
+                {{ title }}
+            </span>
             <div class="flex-center gap-[.5rem]">
                 <button
-                    class="size-[2.75rem] rounded-full border-[1.5px] cursor-pointer border-black flex-center"
+                    @click="swiper_instance?.slidePrev()"
+                    :disabled="swiper_instance?.isBeginning"
+                    :class="
+                        swiper_instance?.isBeginning
+                            ? 'border-slate-200 cursor-not-allowed'
+                            : 'border-black cursor-pointer'
+                    "
+                    class="size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
                 >
                     <Icon
-                        name="ci:chevron-left"
-                        class="**:stroke-black"
+                        name="ci:chevron-right"
+                        :class="
+                            swiper_instance?.isBeginning
+                                ? '**:stroke-slate-200'
+                                : '**:stroke-black'
+                        "
                         size="24"
                     />
                 </button>
                 <button
-                    class="size-[2.75rem] rounded-full border-[1.5px] cursor-pointer border-black flex-center"
+                    @click="swiper_instance?.slideNext()"
+                    :disabled="swiper_instance?.isEnd"
+                    :class="
+                        swiper_instance?.isEnd
+                            ? 'border-slate-200 cursor-not-allowed'
+                            : 'border-black cursor-pointer'
+                    "
+                    class="size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
                 >
                     <Icon
-                        name="ci:chevron-right"
-                        class="**:stroke-black"
+                        name="ci:chevron-left"
+                        :class="
+                            swiper_instance?.isEnd
+                                ? '**:stroke-slate-200'
+                                : '**:stroke-black'
+                        "
                         size="24"
                     />
                 </button>
             </div>
-            <span class="text-black typo-h-3">
-                {{ title }}
-            </span>
         </div>
         <div class="w-full">
-            <Swiper
-                dir="rtl"
-                :slides-per-view="3"
-                :space-between="24"
-                @swiper="onSwiper"
-                @slideChange="onSlideChange"
-            >
+            <Swiper :slides-per-view="3" :space-between="24" @swiper="onSwiper">
                 <SwiperSlide v-for="i in 4" :key="i">
                     <ProductCard
                         brand="Samsung"