api / tickets

components/product-page/Course-detail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center flex-col pb-[30vw] md:pb-[7vw]">
-    <product-page-course-detailsHeader />
+    <product-page-course-detailsHeader :props="props"/>
     <div
       class="flex flex-col flex-col-reverse md:flex-row justify-between w-[87.69%] md:w-[81.04%] mt-[10vw] md:mt-[4.7vw]"
     >
@@ -18,4 +18,9 @@
     </div>
   </div>
 </template>
-  
+
+
+<script setup>
+const props = defineProps(['slug'])
+
+</script>

components/product-page/course-details/Header.vue

@@ -2,7 +2,7 @@
     <div class="w-full relative flex h-[86.41vw] md:h-[40.625vw]">
         <NuxtImg
         :placeholder="[30, 20]"
-          src="/images/html.png"
+          :src="props.props.slug.value.image"
           alt="html"
           class="absolute h-[86.41vw] md:h-[40.625vw] top-0 left-0 w-full object-cover brightness-75"
         />
@@ -10,7 +10,7 @@
           <h1
             class="text-[5.751vw] md:text-[1.69vw] font-[600] -tracking-[0.05vw]"
           >
-            آموزش HTML رایگان مقدماتی تا پیشرفته
+           {{ props.props.slug.value.name }} 
           </h1>
           <p class="text-[3.19vw] md:text-[0.833vw] mt-[0.6vw] text-[#E5E5E5]">
             برنامه نویسی
@@ -195,4 +195,8 @@
           </div>
         </div>
       </div>
-</template>
+</template>
+
+<script setup>
+const props = defineProps(['props'])
+</script>