added related products

2024-12-15 22:15:25 +03:30
parent 3b585ea77c
commit 10c5485202
1 changed files with 78 additions and 0 deletions
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+// imports
+
+import { Swiper, SwiperSlide } from "swiper/vue";
+import type { SwiperClass } from "swiper/react";
+// types
+
+type Props = {
+    title: string;
+};
+
+// props
+
+defineProps<Props>();
+
+// methods
+
+const onSwiper = (swiper: SwiperClass) => {
+    console.log(swiper);
+};
+const onSlideChange = () => {
+    console.log("slide change");
+};
+</script>
+
+<template>
+    <div class="w-full flex flex-col gap-[4rem] py-[5rem]">
+        <div class="w-full flex justify-between items-center">
+            <div class="flex-center gap-[.5rem]">
+                <button
+                    class="size-[2.75rem] rounded-full border-[1.5px] cursor-pointer border-black flex-center"
+                >
+                    <Icon
+                        name="ci:chevron-left"
+                        class="**:stroke-black"
+                        size="24"
+                    />
+                </button>
+                <button
+                    class="size-[2.75rem] rounded-full border-[1.5px] cursor-pointer border-black flex-center"
+                >
+                    <Icon
+                        name="ci:chevron-right"
+                        class="**: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"
+            >
+                <SwiperSlide v-for="i in 4" :key="i">
+                    <ProductCard
+                        brand="Samsung"
+                        title="Galaxy S20 Ultra"
+                        picture="/assets/img/product-1.jpg"
+                        :colors="['#0000ff', '#00ff00', 'red']"
+                        :price="599"
+                        :rate="2.4"
+                        tag="New"
+                    />
+                </SwiperSlide>
+                ...
+            </Swiper>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>