From c588248fd789dc049fb3b851865513e1a3ce725b Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sun, 1 Jun 2025 22:15:41 +0330
Subject: [PATCH] Updated

---
 frontend/components/home/ProductsShowcase.vue | 84 ++++++++++---------
 1 file changed, 44 insertions(+), 40 deletions(-)

diff --git a/frontend/components/home/ProductsShowcase.vue b/frontend/components/home/ProductsShowcase.vue
index a09f06e..55c346a 100644
--- a/frontend/components/home/ProductsShowcase.vue
+++ b/frontend/components/home/ProductsShowcase.vue
@@ -3,13 +3,16 @@
 
 import useHomeData from "~/composables/api/home/useHomeData";
 import { motion } from "motion-v";
+import useSlider from "~/composables/global/useSlider";
 
 // state
 
 const { data: homeData } = useHomeData();
 
-const sliderTimer = ref<NodeJS.Timeout | null>(null);
-const activeSlide = ref(0);
+const { nextSlide, prevSlide, slideTo, activeSlide, progress } = useSlider({
+    duration: 10_000,
+    count: homeData.value!.show_case_slider.length,
+});
 
 const variants = {
     hide: { opacity: 0, y: -200 },
@@ -83,36 +86,6 @@ const childImageVariants = {
         },
     },
 };
-
-const slideTo = (index: number) => {
-    activeSlide.value = index;
-    restartSliderTimer();
-};
-
-const nextSlide = () => {
-    const slidesCount = homeData.value!.show_case_slider.length;
-    if (activeSlide.value > slidesCount - 2) {
-        activeSlide.value = 0;
-    } else {
-        activeSlide.value = activeSlide.value + 1;
-    }
-};
-
-const restartSliderTimer = () => {
-    if (sliderTimer.value) clearInterval(sliderTimer.value);
-    sliderTimer.value = setInterval(() => {
-        nextSlide();
-    }, 5000);
-};
-
-onMounted(() => {
-    nextSlide();
-    restartSliderTimer();
-});
-
-onUnmounted(() => {
-    restartSliderTimer();
-});
 </script>
 
 <template>
@@ -191,16 +164,47 @@ onUnmounted(() => {
                         :variants="childContentVariants"
                         class="flex flex-col items-center justify-center gap-6 text-center"
                     >
-                        <div class="flex items-center flex-row-reverse gap-4 mb-4">
+                        <div class="flex items-center justify-center gap-4 sm:gap-6">
                             <button
-                                v-for="(_slide, index) in homeData!.show_case_slider"
-                                @click="slideTo(index)"
-                                class="py-4 cursor-pointer active:scale-90 transition-transform"
+                                @click="nextSlide"
+                                class="relative"
                             >
-                                <div
-                                    class="h-1 w-12 sm:w-18 lg:w-24 rounded-full"
-                                    :class="activeSlide === index ? 'bg-blue-500' : 'bg-white/15'"
-                                ></div>
+                                <div class="size-8 blur-xl bg-white absolute ping-animation max-sm:hidden"></div>
+                                <Icon
+                                    class="**:stroke-white cursor-pointer size-6 md:size-8"
+                                    name="ci:arrow-right"
+                                />
+                            </button>
+
+                            <div class="flex items-center flex-row-reverse gap-3 xs:gap-4">
+                                <button
+                                    v-for="(_slide, index) in homeData!.show_case_slider"
+                                    @click="slideTo(index)"
+                                    class="h-12 flex-center cursor-pointer active:scale-90 transition-transform"
+                                >
+                                    <div
+                                        dir="ltr"
+                                        :class="activeSlide === index ? 'bg-blue-500/50' : 'bg-white/15'"
+                                        class="h-1 w-8 xs:w-12 md:w-16 rounded-full"
+                                    >
+                                        <div
+                                            :class="activeSlide === index ? 'bg-blue-500' : 'bg-transparent w-full'"
+                                            class="h-full transition-all"
+                                            :style="{ width: `${progress}%` }"
+                                        ></div>
+                                    </div>
+                                </button>
+                            </div>
+
+                            <button
+                                @click="prevSlide"
+                                class="relative"
+                            >
+                                <div class="size-8 blur-xl bg-white absolute ping-animation max-sm:hidden"></div>
+                                <Icon
+                                    class="**:stroke-white cursor-pointer size-6 md:size-8"
+                                    name="ci:arrow-left"
+                                />
                             </button>
                         </div>