Create categories section

2024-12-21 19:46:10 +03:30
parent e94104b115
commit f754a21243
1 changed files with 96 additions and 0 deletions
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+
+// types
+
+import { Swiper, SwiperSlide } from "swiper/vue";
+import type { SwiperClass } from "swiper/react";
+
+type Props = {}
+
+// props
+
+const props = defineProps<Props>();
+const {} = toRefs(props);
+
+// state
+
+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
+
+const onSwiper = (swiper: SwiperClass) => {
+    swiper_instance.value = swiper;
+};
+
+</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"
+            >
+                <CategoryCard
+                    category="یک دسته بندی تست"
+                    picture="/img/product-1.jpg"
+                    :count="20"
+                    description="یک دسته بندی تستasdasd"
+                />
+            </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"
+            />
+        </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>
+</template>