From ea97302ae182d470196538e072fc708affebac09 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Tue, 28 Jan 2025 00:26:09 +0330
Subject: [PATCH] Updated

---
 frontend/components/home/Categories.vue | 117 +++++++++++-------------
 1 file changed, 53 insertions(+), 64 deletions(-)

diff --git a/frontend/components/home/Categories.vue b/frontend/components/home/Categories.vue
index aed0b34..8502fe1 100644
--- a/frontend/components/home/Categories.vue
+++ b/frontend/components/home/Categories.vue
@@ -4,6 +4,7 @@
 
 import { Swiper, SwiperSlide } from "swiper/vue";
 import type { SwiperClass } from "swiper/react";
+import useHomeData from "~/composables/api/home/useHomeData";
 
 type Props = {}
 
@@ -14,30 +15,10 @@ const {} = toRefs(props);
 
 // state
 
+const { data: homeData } = useHomeData();
+
 const swiper_instance = ref<SwiperClass | null>(null);
 
-const slides = [
-    {
-        id: 0,
-        title: "TEST"
-    },
-    {
-        id: 1,
-        title: "TEST"
-    },
-    {
-        id: 2,
-        title: "TEST"
-    },
-    {
-        id: 3,
-        title: "TEST"
-    },
-    {
-        id: 4,
-        title: "TEST"
-    }
-];
 
 // methods
 
@@ -48,50 +29,58 @@ const onSwiper = (swiper: SwiperClass) => {
 </script>
 
 <template>
-    <div class="w-full my-20 relative">
-        <Swiper
-            :slides-per-view="3.65"
-            :space-between="20"
-            :slides-offset-after="125"
-            :slides-offset-before="125"
-            @swiper="onSwiper"
-        >
-            <SwiperSlide
-                v-for="slide in slides"
-                :key="slide.id"
+    <section class="flex flex-col gap-4 bg-black h-[110svh] mt-40 py-32">
+        <div class="w-full flex justify-center items-center">
+            <span class="text-white typo-h-4">
+                دسته بندی ها
+            </span>
+        </div>
+        <div class="w-full my-20 relative">
+            <Swiper
+                :loop="true"
+                :centered-slides="true"
+                :slides-per-view="3.65"
+                :space-between="20"
+                @swiper="onSwiper"
             >
-                <CategoryCard
-                    :id="slide.id"
-                    category="یک دسته بندی تست"
-                    picture="/img/product-1.jpg"
-                    :count="20"
-                    description="یک دسته بندی تستasdasd"
+                <SwiperSlide
+                    v-for="slide in homeData!.sub_categories"
+                    :key="slide.id"
+                >
+                    <CategoryCard
+                        dark-layer
+                        :id="slide.id"
+                        :category="slide.name"
+                        :picture="slide.icon"
+                        :count="slide.product_count"
+                        description="توضیحات دسته بندی"
+                    />
+                </SwiperSlide>
+            </Swiper>
+
+            <div
+                v-if="!swiper_instance?.isBeginning"
+                @click="swiper_instance?.slidePrev()"
+                class="absolute z-20 right-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] bg-white rounded-full size-11.5 flex justify-center items-center"
+            >
+                <Icon
+                    name="ci:arrow-right"
+                    class="**:stroke-black"
+                    size="24"
                 />
-            </SwiperSlide>
-        </Swiper>
+            </div>
 
-        <div
-            v-if="!swiper_instance?.isBeginning"
-            @click="swiper_instance?.slidePrev()"
-            class="absolute z-20 right-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] bg-white rounded-full size-11.5 flex justify-center items-center"
-        >
-            <Icon
-                name="ci:arrow-right"
-                class="**:stroke-black"
-                size="24"
-            />
+            <div
+                v-if="!swiper_instance?.isEnd"
+                @click="swiper_instance?.slideNext()"
+                class="absolute z-20 left-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] bg-white rounded-full size-11.5 flex justify-center items-center"
+            >
+                <Icon
+                    name="ci:arrow-left"
+                    class="**:stroke-black"
+                    size="24"
+                />
+            </div>
         </div>
-
-        <div
-            v-if="!swiper_instance?.isEnd"
-            @click="swiper_instance?.slideNext()"
-            class="absolute z-20 left-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] bg-white rounded-full size-11.5 flex justify-center items-center"
-        >
-            <Icon
-                name="ci:arrow-left"
-                class="**:stroke-black"
-                size="24"
-            />
-        </div>
-    </div>
+    </section>
 </template>
\ No newline at end of file