update

components/home-page/courses-section/Categories.vue

@@ -17,7 +17,9 @@
       </h3>
       <span
         class="mt-[3vw] md:mt-[3vw] text-[#878787] text-[3.59vw] md:text-[0.833vw] md:me-[1.563vw]"
-        >42 ویدیو آموزشی</span
+        >
+        {{data?.count}}
+        ویدیو آموزشی</span
       >
     </div>
     <p
@@ -79,8 +81,9 @@
         :wrapAround="true"
         class="w-full md:w-[95%]"
       >
-        <Slide v-for="slide in categories" :key="slide">
-          <div class="categoriesOption">{{ slide }}</div>
+        <Slide v-for="slide in categories" :key="slide"  @click="selectCategory(slide.id)">
+          <div class="categoriesOption"
+          >{{ slide.name }}</div>
         </Slide>
       </Carousel>
 
@@ -98,21 +101,30 @@
       </svg>
     </div>
   </div>
+  <div v-if="pending" class="grid grid-cols-4 gap-[2vw] mt-[2vw]">
+    <Loading />
+    <Loading />
+    <Loading />
+    <Loading />
+  </div>
+  <courses-pageCourses-list :data="data"/>
 </template>
 <script setup>
-const categories = [
-  "Python",
-  "JavaScript",
-  "C#",
-  "php",
-  "C++",
-  "Ruby",
-  "Node.js",
-  "php",
-  "C++",
-  "Ruby",
-  "Node.js",
-];
+const changeCategory = ref('')
+const  {data, refresh, pending}  = await useFetch(() => "/api/course", {
+     method: "POST",
+     body: {
+      changeCategory
+  }
+ });
+ const categoryLis = await useFetch("/api/category");
+// console.log('daste bandy', categoryLis.data.value);
+ const categories = categoryLis.data.value;
+function selectCategory (id){
+  changeCategory.value = '/category/' + id
+  refresh()
+}
+
 const breakpoints = {
   // 700px and up
   300: {

components/home-page/courses-section/SuggestedCourses.vue

@@ -10,14 +10,15 @@
     <div
       class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
     >
-      <Card />
-      <Card />
-      <Card />
-      <Card />
-      <Card />
-      <Card />
-      <Card />
-      <Card />
+    <div v-for="(course, index) in selectedItems"
+    :key="index">
+    <Card :course="course" />
+  
+  </div>
     </div>
   </div>
-</template>
+</template>
+<script setup>
+const data = await useFetch("/api/course");
+const selectedItems = data.data.value.courses.slice(0, 8);
+</script>