From 7e9b9bd03e0b8406de716c571b2e75a19aa552eb Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sat, 14 Dec 2024 20:58:32 +0330
Subject: [PATCH] Add product slider

---
 .../global/product-detail/Slider.vue          | 58 +++++++++++++++++++
 frontend/components/product/ProductView.vue   | 24 +++++++-
 2 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 frontend/components/global/product-detail/Slider.vue

diff --git a/frontend/components/global/product-detail/Slider.vue b/frontend/components/global/product-detail/Slider.vue
new file mode 100644
index 0000000..65c4fcb
--- /dev/null
+++ b/frontend/components/global/product-detail/Slider.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+
+// types
+
+type Props = {
+    selectedSlide: number;
+    slides: {
+        id: number;
+        picture: string;
+    }[]
+}
+
+// props
+
+const props = defineProps<Props>();
+const { slides, selectedSlide } = toRefs(props);
+
+// emit
+const emit = defineEmits(["update:selectedSlide"]);
+
+// computed
+
+const selectedSlideDetail = computed(() => {
+    return slides.value.find((item) => {
+        return item.id === selectedSlide.value;
+    })!;
+});
+
+// method
+
+const changeSlide = (id: number) => {
+    emit("update:selectedSlide", id);
+};
+
+</script>
+
+<template>
+    <div class="flex flex-col relative gap-4">
+        <div class="bg-red-300 w-full relative aspect-square overflow-hidden rounded-200">
+            <img
+                class="size-full absolute object-cover"
+                :src="selectedSlideDetail.picture"
+                :alt="String(selectedSlideDetail.id)"
+            />
+        </div>
+        <div class="flex items-center justify-between gap-4">
+            <div
+                @click="changeSlide(slide.id)"
+                v-for="slide in slides"
+                :class="selectedSlide === slide.id ? 'ring-black' : 'ring-transparent'"
+                class="cursor-pointer aspect-square w-[108px] ring-2 ring-offset-4 rounded-200 w-full overflow-hidden relative"
+                :key="slide.id"
+            >
+                <img class="absolute object-cover size-full" :src="slide.picture" :alt="String(slide.id)" />
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/components/product/ProductView.vue b/frontend/components/product/ProductView.vue
index 4509295..0ce2dce 100644
--- a/frontend/components/product/ProductView.vue
+++ b/frontend/components/product/ProductView.vue
@@ -4,13 +4,31 @@
 const quantity = ref(1);
 const maxQuantity = ref(10);
 
+const selectedSlide = ref(0);
+const slides = [
+    {
+        id: 0,
+        picture: "/img/product-1.jpg"
+    },
+    {
+        id: 1,
+        picture: "/img/product-2.jpg"
+    },
+    {
+        id: 2,
+        picture: "/img/product-3.jpg"
+    }
+];
+
 </script>
 
 <template>
     <div class="flex gap-12">
-        <div class="bg-red-300 w-full h-[500px] flex-1 rounded-200">
-
-        </div>
+        <Slider
+            class="flex-1"
+            v-model:selectedSlide="selectedSlide"
+            :slides="slides"
+        />
         <div class="flex-1 flex flex-col gap-3 mt-12">
             <span class="typo-label-sm">
                 سامسونگ