create searchBox section

components/Card.vue

@@ -92,7 +92,7 @@
                 </div>
                 <div class="flex justify-between">
                  
-                    <NuxtLink :to="`${props.course?.id}`"
+                    <NuxtLink :to="`${props.course?._id}`"
                         class="font-[500] mt-[0.5vw] flex items-center justify-center gap-[0.417vw]  md:h-[2.292vw] px-[4.103vw] md:px-0 py-[2.308vw] md:py-[0.521vw] bg-primaryGreen text-white text-[3.19vw] md:text-[0.833vw] rounded-[2.564vw] md:rounded-[0.521vw] md:w-[7.917vw]">
                         شروع دوره
                         <svg
@@ -129,7 +129,7 @@
                                 </linearGradient>
                             </defs>
                         </svg>
-                        <span class="absolute top-[0.9vw] left-[0.9vw] text-[#383E43] font-bold thin text-[0.833vw]">{{props.course.satisfactionLevel}}</span>
+                        <span class="absolute top-[0.9vw] w-[1.5vw] text-center left-[0.4vw] text-[#383E43] font-bold thin text-[0.833vw]">{{props.course.averageRating}}</span>
                     </span>
                 </div>
 
@@ -141,9 +141,7 @@
 <script setup>
 import { useToast } from 'vue-toastification'
 const props = defineProps(['course']);
-const MyArray = ['Salam','Man','Sadegh','Hastam'];
 const toast = useToast()
-console.log(props);
 function hideEndOfString(inputString) {
     const words = inputString.split(' ');
     if (words.length > 8) {