From 10c54852026981702ab3aa9e0aba0b7a6dde2008 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sun, 15 Dec 2024 22:15:25 +0330
Subject: [PATCH] added related products

---
 .../global/product-detail/RelatedProducts.vue | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 frontend/components/global/product-detail/RelatedProducts.vue

diff --git a/frontend/components/global/product-detail/RelatedProducts.vue b/frontend/components/global/product-detail/RelatedProducts.vue
new file mode 100644
index 0000000..4644bc3
--- /dev/null
+++ b/frontend/components/global/product-detail/RelatedProducts.vue
@@ -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>