create searchBox section

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

@@ -21,7 +21,8 @@
 
     <!-- comment 1 -->
     <div
-      class="relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between p-[4vw] md:p-[1.55vw]"
+    v-for="item in props.props" :key="item.id"
+      class="mt-[1vw] relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between p-[4vw] md:p-[1.55vw]"
     >
       <img
         src="/public/images/client1.png"
@@ -29,7 +30,7 @@
         class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
       />
 
-      <div class="ps-[3vw] md:ps-[1vw]">
+      <div class="ps-[3vw] md:ps-[1vw] w-full">
         <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
           علی مصلحی
         </p>
@@ -40,10 +41,8 @@
           <p
             class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
           >
-            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
-            استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله
-            در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
-            نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
+          {{ item.text }}
+
           </p>
         </div>
       </div>
@@ -73,7 +72,7 @@
     </div>
 
     <!-- comment 2 -->
-    <div
+    <!-- <div
       class="mt-[4vw] md:mt-[1vw] bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw]"
     >
       <div class="flex justify-between relative p-[4vw] md:p-[1.55vw]">
@@ -179,5 +178,10 @@
           />
         </svg>
       </div>
-    </div>
-</template>
+    </div> -->
+</template>
+
+<script setup>
+const props = defineProps(['props'])
+
+</script>