update

components/Card.vue

@@ -3,12 +3,12 @@
         <div class="relative text-center h-[56.154vw] md:h-[11.406vw]">
             <p
                 class="post w-[30.769vw] md:w-[6.979vw] h-[9.487vw] md:h-[2.24vw] flexBox text-[3.59vw] md:text-[0.938vw] absolute  left-0 bottom-0 bg-white  rounded-tr-[3.59vw] md:rounded-tr-[0.781vw]">
-                540,000
+                {{props.course?.price}},000
                 <span class="ms-[1vw] md:ms-[0.2vw] text-[2.236vw] md:text-[0.585vw]">تومان</span>
             </p>
             <NuxtImg style="object-fit: cover;" :src="props.course?.image"  alt="laravel"
             :placeholder="[30, 20]"
-            :format="webp"
+           
                 class="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw]" />
              
         </div>
@@ -17,10 +17,10 @@
 
         <div class="flexBox flex-col">
             <div class="w-[69.231vw] md:w-[16vw] space-y-[9vw] md:space-y-[1.4vw] mt-[4vw] md:mt-[0vw] xl:mt-[0.7vw]">
-                <NuxtLink to="/ترفندهای-پایتون"
+                <h1
                     class="hover:text-primaryGreen text-[3.59vw] md:text-[0.833vw] text-[#383E43] w-full">
                  {{props.course?.name}}
-               </NuxtLink>
+            </h1>
                 <div class="flex justify-between text-[3.614vw] md:text-[0.658vw]">
                     <p class="flex items-center text-[#878787]">
                         <svg 
@@ -39,7 +39,22 @@
                                 stroke-linejoin="round" />
                         </svg>
     
-                        <span class="md:ms-[0.2vw]">بک اند</span>
+                        <span class="md:ms-[0.2vw]"
+                        v-for="category in props.course?.categories"
+                        :key="category.id"
+                        >
+                            {{category.name}}
+                  
+                            <!-- <span v-if="props.course?.categories[0] === '66587a9498d0a0db14693a5b'">
+                                بک اند
+                            </span>
+                            <span v-if="props.course?.categories[0] === '66587ae698d0a0db14693a5e'">
+                                فرانت اند
+                            </span>
+                            <span v-else>
+                            {{props.course?.categories}}
+                            </span> -->
+                        </span>
                     </p>
                     <p class="flex items-center text-[#878787]">
                         <svg 
@@ -60,7 +75,7 @@
                                 fill="#E5E5E5" />
                         </svg>
     
-                        <span class="md:ms-[0.2vw]">825 دانشجو</span>
+                        <span class="md:ms-[0.2vw]">{{props.course?.studentsCount}} دانشجو</span>
                     </p>
                     <p class="flex items-center text-[#878787]">
                         <svg
@@ -72,7 +87,7 @@
                                 fill="#E5E5E5" />
                         </svg>
     
-                        <span class="md:ms-[0.2vw]">00:28</span>
+                        <span class="md:ms-[0.2vw]">{{props.course?.duration}} ساعت</span>
                     </p>
                 </div>
                 <div class="flex justify-between">
@@ -127,7 +142,7 @@
 </template>
 <script setup>
 import { useToast } from 'vue-toastification'
-const props = defineProps(['course'])
+const props = defineProps(['course']);
 const toast = useToast()
 const change = () =>{
     toast.error('متن تست')