From a954bb0a3ac821dcf5e5eb5405d6dd89a946ebfc Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Fri, 21 Feb 2025 19:59:36 +0330
Subject: [PATCH] Updated

---
 .../components/product/ProductDetails.vue     | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/frontend/components/product/ProductDetails.vue b/frontend/components/product/ProductDetails.vue
index 6ba8b56..bf267d5 100644
--- a/frontend/components/product/ProductDetails.vue
+++ b/frontend/components/product/ProductDetails.vue
@@ -1,3 +1,13 @@
+<script lang="ts" setup>
+
+// provide / inject
+
+import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
+
+const { selectedVariant } = inject("productVariant") as ProductVariantProvideType;
+
+</script>
+
 <template>
     <section class="w-full p-[5rem] flex flex-col gap-y-[1.5rem]">
         <div class="w-full flex">
@@ -16,23 +26,27 @@
                         class="w-full grid grid-cols-2 gap-y-[1.5rem] gap-x-[3rem]"
                     >
                         <div
-                            v-for="i in 4"
+                            v-for="inPackItem in selectedVariant.in_pack_items"
                             class="w-full flex-col-center gap-[.75rem]"
                         >
                             <div
                                 class="size-[6.25rem] rounded-full border-slate-200 bg-white flex-center"
                             >
-                                <Icon name="ci:flag" size="44" />
+                                <div class="size-11 relative">
+                                    <img
+                                        class="size-full absolute object-cover"
+                                        :src="inPackItem.cover"
+                                        :alt="inPackItem.item_title"
+                                    />
+                                </div>
                             </div>
-                            <span class="text-black typo-p-md">Headphones</span>
+                            <span class="text-black typo-p-md">
+                                {{ inPackItem.item_title}}
+                            </span>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </section>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped></style>
+</template>
\ No newline at end of file