Updated

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,15 +26,23 @@
                         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>
@@ -32,7 +50,3 @@
         </div>
     </section>
 </template>
-
-<script setup lang="ts"></script>
-
-<style scoped></style>