pagination / category / sort

2024-06-01 23:02:18 +03:30
parent 2242ed022f
commit 69ad899b35
11 changed files with 520 additions and 378 deletions
@@ -37,7 +37,7 @@ body {
        @apply h-[2.917vw] rounded-[1.563vw] py-[0.833vw] px-[4.167vw] text-white bg-primaryGreen gap-[0.521vw] text-[0.833vw]
    }
    .categoriesOption{
-        @apply font-semibold py-[2.051vw] md:py-[0.625vw] w-[22.821vw] md:w-[8vw] mx-[0.5vw] md:mx-auto gap-2 rounded-[2.051vw] md:rounded-[0.521vw]  border-[1px] border-primaryGreen text-primaryGreen text-[3.59vw] md:text-[1.055vw]
+        @apply font-semibold py-[2.051vw] md:py-[0.625vw] w-[22.821vw] md:w-[8vw] mx-[0.5vw] md:ms-[0.01vw] gap-2 rounded-[2.051vw] md:rounded-[0.521vw]  border-[1px] border-primaryGreen text-primaryGreen text-[3.59vw] md:text-[1.055vw]
    }
    .courses{
        @apply w-[87.69%] md:w-[81.04%] flex flex-col justify-center mt-[18vw]  md:mt-[4.688vw] px-[3.846vw] md:px-[1.563vw] bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw]
@@ -1,97 +0,0 @@
-<template>
-  <div
-    class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.3vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
-  >
-    <div
-      class="ps-[1.5vw] border-b-[0.104vw] mt-[2vw] flex gap-x-[1vw] items-center text-[0.833vw] text-[#878787]"
-    >
-      <span
-        class="text-[0.741vw] text-[#383E43] flex items-center gap-[0.5vw] pb-[0.681vw]"
-      >
-        <svg
-          class="w-[6.154vw] md:w-[1.25vw] h-[6.154vw] md:h-[1.302vw]"
-          viewBox="0 0 24 25"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M3 7.5H21"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-linecap="round"
-          />
-          <path
-            d="M6 12.5H18"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-linecap="round"
-          />
-          <path
-            d="M10 17.5H14"
-            stroke="#383E43"
-            stroke-width="1.5"
-            stroke-linecap="round"
-          />
-        </svg>
-        <span class="hidden md:block"> مرتب سازی بر اساس: </span>
-        <span
-          class="block md:hidden text-[3.59vw] py-[2vw] ps-[1vw]"
-          @click="openSortOptions"
-          >مرتب سازی</span
-        >
-      </span>
-      <ul class="gap-x-[1vw] items-center hidden md:flex">
-        <li class="relative pb-[0.681vw] text-primaryGreen active">
-          همه دوره ها
-        </li>
-        <li class="pb-[0.681vw]">دوره های رایگان</li>
-        <li class="pb-[0.681vw]">ارزان ترین</li>
-        <li class="pb-[0.681vw]">گران ترین</li>
-      </ul>
-    </div>
-    <div class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
-    >
-    <div v-for="(course, index) in data.data.courses"
-    :key="index">
-    <Card :course="course" />
-  
-  </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-// const pages = 17 / 16
-// console.log(Math.ceil(pages));
-//const data = await useFetch("/api/course");
-const data = defineProps(['data']);
-const openSortOptions = () => {
-  if (process.client) {
-    document
-      .getElementById("filters")
-      .classList.remove("translate-y-[80.769vw]");
-    document.getElementsByTagName("html")[0].classList.add("overflow-hidden");
-    document.getElementById("brightnessFilter").style.filter =
-      "brightness(50%)";
-    document.getElementById("brightnessFilter").style.backdropFilter =
-      "brightness(90%)";
-  }
-};
-const loading = ref(false);
-onMounted(() => {
-  setTimeout(() => {
-    loading.value = true;
-  }, 2000);
-});
-</script>
-
-<style>
-.active::before {
-  content: "";
-  position: absolute;
-  background-color: #0d3f40;
-  width: 100%;
-  height: 0.01vw;
-  top: 2vw;
-}
-</style>
@@ -1,51 +0,0 @@
-<template>
-  <div class="flexBox py-[5vw] md:py-[2vw]">
-    <ul class="flexBox gap-[6vw] md:gap-[2vw] text-[4.038vw] md:text-[1.055vw] text-[#383E43]">
-      <li>
-        <svg
-          class="w-[4.103vw] md:w-[1.25vw] h-[4.103vw] md:h-[1.25vw]"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M8.91016 19.9201L15.4302 13.4001C16.2002 12.6301 16.2002 11.3701 15.4302 10.6001L8.91016 4.08008"
-            stroke="#292D32"
-            stroke-width="1.5"
-            stroke-miterlimit="10"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </li>
-
-      <li>53</li>
-
-      <li>...</li>
-
-      <li>3</li>
-
-      <li>2</li>
-
-      <li class="flexBox bg-primaryGreen text-white w-[7.692vw] md:w-[2.292vw] h-[7.692vw] md:h-[2.292vw] rounded-[50%]">1</li>
-
-      <li>
-        <svg
-        class="w-[4.103vw] md:w-[1.25vw] h-[4.103vw] md:h-[1.25vw]"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M14.9998 19.9201L8.47984 13.4001C7.70984 12.6301 7.70984 11.3701 8.47984 10.6001L14.9998 4.08008"
-            stroke="#292D32"
-            stroke-width="1.5"
-            stroke-miterlimit="10"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
-      </li>
-    </ul>
-  </div>
-</template>
@@ -3,9 +3,86 @@
      <div
        class="courses"
      >
-        <home-page-courses-sectionCategories />
-        <home-page-courses-sectionSuggestedCourses />
-        <home-page-courses-sectionWatchCoursesButton />
+      <div class="category">
+        <h3
+          class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[4.103vw] md:mt-[3.49vw] ms-0 md:ms-[1.563vw]"
+        >
+          انتخاب گسترده ای از دوره ها
+        </h3>
+  
+        <p
+          class="hidden md:block ms-0 md:ms-[1.563vw] text-[#878787] text-[3.59vw] md:text-[1.055vw] mt-[2vw] md:mt-[1vw]"
+        >
+          انتخاب از بین بیش از 210000 دوره آنلاین ویدیویی با افزودنی های جدید که هر
+          ماه منتشر می شود
+        </p>
+    
+    
+      </div>
+        <!-- <home-page-courses-sectionCategories /> -->
+        <div
+        class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.2vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
+      >
+        <h5
+          class="border-b pb-[1.5vw] text-[4.544vw] mt-[1.5vw] md:mt-[1.6vw] md:text-[1.481vw] text-[#383E43] font-bold"
+        >
+          دوره های پیشنهادی
+        </h5>
+        <div
+          class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
+        >
+        <div v-for="(course, index) in data.courses"
+        :key="index">
+        <Card :course="course" />
+      
+      </div>
+        </div>
+      </div>
+   
+      <div
+      class="flex text-[#383E43] py-[4vw] md:py-[1.1vw] md:pt-[1.9vw] text-[3.59vw] md:text-[0.938vw] justify-center mt-[2vw] md:mt-[0.417vw]"
+  >
+    <nuxt-link to="/courses"
+      class="flex justify-center items-center border-b-2 border-[#878787] w-[45.59vw] md:w-[13.542vw]"
+    >
+      <svg
+        class="mb-[0.417vw] h-[4.103vw] w-[4.103vw] md:h-[1.146vw] md:w-[1.146vw]"
+        viewBox="0 0 22 23"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.917 10.5833L19.4337 3.06665"
+          stroke="#383E43"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M20.1666 6.73325V2.33325H15.7666"
+          stroke="#383E43"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M10.083 2.33325H8.24967C3.66634 2.33325 1.83301 4.16659 1.83301 8.74992V14.2499C1.83301 18.8333 3.66634 20.6666 8.24967 20.6666H13.7497C18.333 20.6666 20.1663 18.8333 20.1663 14.2499V12.4166"
+          stroke="#383E43"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      <span class="ms-[2vw] md:ms-[0.417vw] pb-[0.417vw]"> دیدن همه ی دوره ها </span>
+    </nuxt-link>
+  </div>
+
+
      </div>
    </div>
-  </template>
+  </template>
+
+  <script setup>
+const {data} = await useFetch("/api/course");
+// const selectedItems = data.data.value.courses.slice(0, 8);
+</script>
@@ -1,147 +0,0 @@
-<template>
-  <div class="category">
-    <h3
-      v-if="$route.path === '/'"
-      class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[4.103vw] md:mt-[3.49vw] ms-0 md:ms-[1.563vw]"
-    >
-      انتخاب گسترده ای از دوره ها
-    </h3>
-    <div
-      class="flex flex-col md:flex-row items-start justify-between md:items-center"
-      v-else
-    >
-      <h3
-        class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[6vw] md:mt-[4.103vw] md:mt-[3.2vw] ms-0 md:ms-[1.563vw]"
-      >
-        حرفه آینده را کشف کنید
-      </h3>
-      <span
-        class="mt-[3vw] md:mt-[3vw] text-[#878787] text-[3.59vw] md:text-[0.833vw] md:me-[1.563vw]"
-        >
-        {{data?.count}}
-        ویدیو آموزشی</span
-      >
-    </div>
-    <p
-      class="hidden md:block ms-0 md:ms-[1.563vw] text-[#878787] text-[3.59vw] md:text-[1.055vw] mt-[2vw] md:mt-[1vw]"
-    >
-      انتخاب از بین بیش از 210000 دوره آنلاین ویدیویی با افزودنی های جدید که هر
-      ماه منتشر می شود
-    </p>
-    <div
-      v-show="$route.path === '/courses'"
-      class="mt-[5vw] md:mt-[2.3vw] mb-[3.2vw] relative"
-    >
-      <svg
-        class="absolute top-[3vw] md:top-[0.9vw] right-[4.5vw] md:right-[2.5vw] h-[5.128vw] md:h-[1.458vw] w-[5.128vw] md:w-[1.458vw]"
-        viewBox="0 0 28 28"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M13.4168 24.5C19.538 24.5 24.5002 19.5378 24.5002 13.4167C24.5002 7.29552 19.538 2.33334 13.4168 2.33334C7.29567 2.33334 2.3335 7.29552 2.3335 13.4167C2.3335 19.5378 7.29567 24.5 13.4168 24.5Z"
-          stroke="#878787"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M25.6668 25.6667L23.3335 23.3333"
-          stroke="#878787"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-
-      <input
-        class="thin w-[100%] md:w-[45vw] h-[10.769vw] md:h-[3.333vw] text-[2.836vw] md:text-[0.741vw] text-[#878787] rounded-[2.564vw] md:rounded-[0.781vw] ps-[12vw] md:ps-[3vw] md:ms-[1.563vw] shadow-sm"
-        type="text"
-        placeholder="نام آموزش ، دوره و ... را وارد کنید"
-      />
-    </div>
-    <div class="flexBox px-0 md:px-[1vw] h-[2.813vw] mt-[10vw] md:mt-[2.5vw]">
-      <svg
-        @click="this.$refs.carousel.next()"
-        class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
-        viewBox="0 0 30 30"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          class="fill-[#878787] hover:fill-[#383E43]"
-          d="M18.9996 13.1125L16.5371 10.65L12.5246 6.63753C11.6746 5.80003 10.2246 6.40003 10.2246 7.60003V15.3875V22.4C10.2246 23.6 11.6746 24.2 12.5246 23.35L18.9996 16.875C20.0371 15.85 20.0371 14.15 18.9996 13.1125Z"
-        />
-      </svg>
-
-      <Carousel
-        :items-to-show="8.3"
-        ref="carousel"
-        :breakpoints="breakpoints"
-        :wrapAround="true"
-        class="w-full md:w-[95%]"
-      >
-        <Slide v-for="slide in categories" :key="slide"  @click="selectCategory(slide.id)">
-          <div class="categoriesOption"
-          >{{ slide.name }}</div>
-        </Slide>
-      </Carousel>
-
-      <svg
-        @click="this.$refs.carousel.prev()"
-        class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
-        viewBox="0 0 30 30"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M17.4748 6.65005L13.4623 10.6626L10.9998 13.1126C9.9623 14.1501 9.9623 15.8376 10.9998 16.8751L17.4748 23.3501C18.3248 24.2001 19.7748 23.5876 19.7748 22.4001V15.3876V7.60005C19.7748 6.40005 18.3248 5.80005 17.4748 6.65005Z"
-          class="fill-[#878787] hover:fill-[#383E43]"
-        />
-      </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 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: {
-    itemsToShow: 3.5,
-    snapAlign: "end",
-  },
-  700: {
-    itemsToShow: 8.6,
-    snapAlign: "end",
-  },
-  // 1024 and up
-  1024: {
-    itemsToShow: 8.6,
-    snapAlign: "end",
-  },
-};
-</script>
-
-<style scoped>
-</style>
@@ -1,24 +0,0 @@
-<template>
-    <div
-    class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.2vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
-  >
-    <h5
-      class="text-[4.544vw] mt-[1.5vw] md:mt-[1.6vw] md:text-[1.481vw] text-[#383E43] font-bold"
-    >
-      دوره های پیشنهادی
-    </h5>
-    <div
-      class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
-    >
-    <div v-for="(course, index) in selectedItems"
-    :key="index">
-    <Card :course="course" />
-  
-  </div>
-    </div>
-  </div>
-</template>
-<script setup>
-const data = await useFetch("/api/course");
-const selectedItems = data.data.value.courses.slice(0, 8);
-</script>
@@ -1,39 +0,0 @@
-<template>
-    <div
-      class="flex text-[#383E43] py-[4vw] md:py-[1.1vw] md:pt-[1.9vw] text-[3.59vw] md:text-[0.938vw] justify-center mt-[2vw] md:mt-[0.417vw]"
-  >
-    <nuxt-link to="/courses"
-      class="flex justify-center items-center border-b-2 border-[#878787] w-[45.59vw] md:w-[13.542vw]"
-    >
-      <svg
-        class="mb-[0.417vw] h-[4.103vw] w-[4.103vw] md:h-[1.146vw] md:w-[1.146vw]"
-        viewBox="0 0 22 23"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M11.917 10.5833L19.4337 3.06665"
-          stroke="#383E43"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M20.1666 6.73325V2.33325H15.7666"
-          stroke="#383E43"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M10.083 2.33325H8.24967C3.66634 2.33325 1.83301 4.16659 1.83301 8.74992V14.2499C1.83301 18.8333 3.66634 20.6666 8.24967 20.6666H13.7497C18.333 20.6666 20.1663 18.8333 20.1663 14.2499V12.4166"
-          stroke="#383E43"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-      <span class="ms-[2vw] md:ms-[0.417vw] pb-[0.417vw]"> دیدن همه ی دوره ها </span>
-    </nuxt-link>
-  </div>
-</template>
@@ -1,12 +1,430 @@
 <template>
-    <div id="brightnessFilter"  class="flex justify-center -mt-[12vw] mb-[25vw] md:my-[5.9vw] ">
-        <div class="courses">
-            <div >
-                <home-page-courses-sectionCategories />
-                <!-- <courses-pageCourses-list /> -->
-                <courses-pagePagination />
-            </div>
+  <div
+    id="brightnessFilter"
+    class="flex justify-center -mt-[12vw] mb-[25vw] md:my-[5.9vw]"
+  >
+    <div class="courses">
+      <div>
+        <div class="category">
+          <h3
+            v-if="$route.path === '/'"
+            class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[4.103vw] md:mt-[3.49vw] ms-0 md:ms-[1.563vw]"
+          >
+            انتخاب گسترده ای از دوره ها
+          </h3>
+          <div
+            class="flex flex-col md:flex-row items-start justify-between md:items-center"
+            v-else
+          >
+            <h3
+              class="font-semibold text-[#383E43] text-[5.11vw] md:text-[1.69vw] mt-[6vw] md:mt-[4.103vw] md:mt-[3.2vw] ms-0 md:ms-[1.563vw]"
+            >
+              حرفه آینده را کشف کنید
+            </h3>
+            <span
+              class="mt-[3vw] md:mt-[3vw] text-[#878787] text-[3.59vw] md:text-[0.833vw] md:me-[1.563vw]"
+            >
+              {{ data?.count }}
+              ویدیو آموزشی</span
+            >
+          </div>
+          <p
+            class="hidden md:block ms-0 md:ms-[1.563vw] text-[#878787] text-[3.59vw] md:text-[1.055vw] mt-[2vw] md:mt-[1vw]"
+          >
+            انتخاب از بین بیش از 210000 دوره آنلاین ویدیویی با افزودنی های جدید
+            که هر ماه منتشر می شود
+          </p>
+          <div
+            v-show="$route.path === '/courses'"
+            class="mt-[5vw] md:mt-[2.3vw] mb-[3.2vw] relative"
+          >
+            <svg
+              class="absolute top-[3vw] md:top-[0.9vw] right-[4.5vw] md:right-[2.5vw] h-[5.128vw] md:h-[1.458vw] w-[5.128vw] md:w-[1.458vw]"
+              viewBox="0 0 28 28"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M13.4168 24.5C19.538 24.5 24.5002 19.5378 24.5002 13.4167C24.5002 7.29552 19.538 2.33334 13.4168 2.33334C7.29567 2.33334 2.3335 7.29552 2.3335 13.4167C2.3335 19.5378 7.29567 24.5 13.4168 24.5Z"
+                stroke="#878787"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M25.6668 25.6667L23.3335 23.3333"
+                stroke="#878787"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+
+            <input
+              class="thin w-[100%] md:w-[45vw] h-[10.769vw] md:h-[3.333vw] text-[2.836vw] md:text-[0.741vw] text-[#878787] rounded-[2.564vw] md:rounded-[0.781vw] ps-[12vw] md:ps-[3vw] md:ms-[1.563vw] shadow-sm"
+              type="text"
+              placeholder="نام آموزش ، دوره و ... را وارد کنید"
+            />
+          </div>
+
+          <div
+            class="flexBox px-0 md:px-[1vw] h-[2.813vw] mt-[10vw] md:mt-[2.5vw]"
+          >
+            <svg
+              @click="this.$refs.carousel.next()"
+              class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
+              viewBox="0 0 30 30"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                class="fill-[#878787] hover:fill-[#383E43]"
+                d="M18.9996 13.1125L16.5371 10.65L12.5246 6.63753C11.6746 5.80003 10.2246 6.40003 10.2246 7.60003V15.3875V22.4C10.2246 23.6 11.6746 24.2 12.5246 23.35L18.9996 16.875C20.0371 15.85 20.0371 14.15 18.9996 13.1125Z"
+              />
+            </svg>
+
+            <Carousel
+              dir="rtl"
+              :items-to-show="2"
+              ref="carousel"
+              :wrapAround="false"
+              class="w-full flex"
+            >
+      
+              <Slide
+                v-for="slide in categories"
+                :key="slide.id"
+                @click="selectCategory(slide.id)"
+              >
+                <p 
+                class="categoriesOption cursor-pointer"
+                :class="{'bg-primaryGreen text-white'  :  route.query.hasOwnProperty('category') && route.query.category == slide.id }"
+                >{{ slide.name }}</p>
+              </Slide>
+            </Carousel>
+
+            <svg
+              @click="this.$refs.carousel.prev()"
+              class="hidden md:block h-[1.563vw] w-[1.563vw] cursor-pointer"
+              viewBox="0 0 30 30"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M17.4748 6.65005L13.4623 10.6626L10.9998 13.1126C9.9623 14.1501 9.9623 15.8376 10.9998 16.8751L17.4748 23.3501C18.3248 24.2001 19.7748 23.5876 19.7748 22.4001V15.3876V7.60005C19.7748 6.40005 18.3248 5.80005 17.4748 6.65005Z"
+                class="fill-[#878787] hover:fill-[#383E43]"
+              />
+            </svg>
+          </div>
        </div>
+
+        <div
+          class="suggestions px-[1vw] md:px-[1.042vw] mt-[12vw] md:mt-[3.3vw] md:bg-white rounded-[0.781vw] flex flex-col gap-[0.417vw] pb-[1.667vw]"
+        >
+          <div
+            class="ps-[1.5vw] border-b-[0.104vw] mt-[2vw] flex gap-x-[1vw] items-center text-[0.833vw] text-[#878787]"
+          >
+            <span
+              class="text-[0.741vw] text-[#383E43] flex items-center gap-[0.5vw] pb-[0.681vw]"
+            >
+              <svg
+                class="w-[6.154vw] md:w-[1.25vw] h-[6.154vw] md:h-[1.302vw]"
+                viewBox="0 0 24 25"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3 7.5H21"
+                  stroke="#383E43"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                />
+                <path
+                  d="M6 12.5H18"
+                  stroke="#383E43"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                />
+                <path
+                  d="M10 17.5H14"
+                  stroke="#383E43"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                />
+              </svg>
+              <span class="hidden md:block"> مرتب سازی بر اساس: </span>
+              <span
+                class="block md:hidden text-[3.59vw] py-[2vw] ps-[1vw]"
+                @click="openSortOptions"
+                >مرتب سازی</span
+              >
+            </span>
+            <ul class="gap-x-[1vw] items-center hidden md:flex">
+              <li class="pb-[0.681vw] cursor-pointer"
+              :class="{'relative text-primaryGreen active' : !route.query.hasOwnProperty('price') || route.query.price == '' }"
+              @click="sortByHandler('')">
+                همه دوره ها
+              </li>
+              <li class="pb-[0.681vw] cursor-pointer"
+              :class="{'relative text-primaryGreen active' : route.query.hasOwnProperty('price') && route.query.price == 'free' }"
+              @click="sortByHandler('free')">دوره های رایگان</li>
+             
+              <li class="pb-[0.681vw] cursor-pointer"
+              :class="{'relative text-primaryGreen active' : route.query.hasOwnProperty('price') && route.query.price == 'low_to_high' }"
+              @click="sortByHandler('low_to_high')"
+              >ارزان ترین</li>
+              <li class="pb-[0.681vw] cursor-pointer" 
+              :class="{'relative text-primaryGreen active' : route.query.hasOwnProperty('price') && route.query.price == 'high_to_low' }"
+              @click="sortByHandler('high_to_low')">گران ترین</li>
+            </ul>
+          </div>
+          <div
+            class="mt-[4.051vw] md:mt-[2.1vw] grid gap-[4vw] md:gap-[1.25vw] grid-cols-1 md:grid-cols-4"
+          >
+   
+            <Loading v-if="pending"/>
+            <Loading v-if="pending"/>
+            <Loading v-if="pending"/>
+            <Loading v-if="pending"/>
+            <div v-else v-for="(course, index) in data.courses" :key="index">
+              <Card :course="course" />
+            </div>
+
+
+          </div>
+        </div>
+
+        <div class="flexBox py-[5vw] md:py-[2vw]" dir="ltr">
+          <ul
+            class="flexBox gap-[6vw] md:gap-[2vw] text-[4.038vw] md:text-[1.055vw] text-[#383E43]"
+          >
+            <li class="w-[1.5vw]">
+              
+              <svg
+              @click="prevPage"
+                class="cursor-pointer w-[4.103vw] md:w-[1.25vw] h-[4.103vw] md:h-[1.25vw]"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                :class="{'stroke-slate-300': route.query.hasOwnProperty('page') && route.query.page == 1 }"
+                  d="M14.9998 19.9201L8.47984 13.4001C7.70984 12.6301 7.70984 11.3701 8.47984 10.6001L14.9998 4.08008"
+                  stroke="#292D32"
+                  stroke-width="1.5"
+                  stroke-miterlimit="10"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </li>
+            <!-- <li
+              v-for="(page, index) in paginationLength"
+              :key="index"
+              @click="changePage(page)"
+              class="cursor-pointer"
+              :class="{
+                'flexBox bg-primaryGreen text-white w-[7.692vw] md:w-[2.292vw] h-[7.692vw] md:h-[2.292vw] rounded-[50%]':
+                  $route.query.page == page,
+              }"
+            >
+              {{ page }}
+            </li> -->
+            <li
+            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < 7 || !route.query.hasOwnProperty('page')}"
+            class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{pageNumber - 4}}</li>
+
+            <li
+            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < 6 || !route.query.hasOwnProperty('page')}"
+            class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{pageNumber - 3}}</li>
+
+            <li
+            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page < 5 || !route.query.hasOwnProperty('page')}"
+            class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{pageNumber - 2}}</li>
+
+            <li 
+            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page == 1|| !route.query.hasOwnProperty('page')}"
+            class="w-[1.5vw] cursor-pointer" @click="prevPage">{{pageNumber - 1}}</li>
+           
+
+
+            <li class="w-[1.5vw] cursor-pointer flexBox bg-primaryGreen text-white w-[7.692vw] md:w-[2.292vw] h-[7.692vw] md:h-[2.292vw] rounded-[50%]">{{pageNumber}}</li>
+
+            <li
+            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page >= 7}"
+            class="w-[1.5vw] cursor-pointer" @click="nextPage(1)">{{parseInt(pageNumber) + 1}}</li>
+          
+
+            <li
+            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page >= 2}"
+            class="w-[1.5vw] cursor-pointer" @click="nextPage(2)">{{parseInt(pageNumber) + 2}}</li>
+          
+
+            
+            <li class="w-[1.5vw]" v-if="pageNumber < 5">...</li>
+       
+            
+           
+
+
+            <li
+            class="w-[1.5vw]"
+            :class="{'hidden': route.query.hasOwnProperty('page') && route.query.page > 5}" @click="nextPage"
+            >{{paginationLength}}</li>
+
+            
+
+
+            <li class="w-[1.5vw]">
+
+              <svg
+              @click="nextPage(1)"
+                class="cursor-pointer w-[4.103vw] md:w-[1.25vw] h-[4.103vw] md:h-[1.25vw]"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                :class="{'stroke-slate-300': route.query.hasOwnProperty('page') && route.query.page == paginationLength }"
+                  d="M8.91016 19.9201L15.4302 13.4001C16.2002 12.6301 16.2002 11.3701 15.4302 10.6001L8.91016 4.08008"
+                  stroke="#292D32"
+                  stroke-width="1.5"
+                  stroke-miterlimit="10"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </li>
+          </ul>
+        </div>
+
+      </div>
    </div>
-    <courses-pageSort-filter />
-</template>
+  </div>
+  <courses-pageSort-filter />
+</template>
+
+
+
+<script setup>
+import Loading from "./../../components/Loading.vue";
+const query = ref({});
+const router = useRouter();
+const route = useRoute();
+const pageNumber = ref(0);
+const tedad = ref(0)
+console.log('tedad 1', tedad.value);
+const paginationLength = ref(0);
+query.value = route.query;
+//console.log(route.query.page);
+pageNumber.value = route.query.hasOwnProperty('page') ? route.query.page : 1
+const { data, refresh, pending } = await useFetch(() => "/api/course", {
+  method: "POST",
+  query: query,
+});
+watch(data => {
+  if (Object.keys(route.query).length == 0) {
+      query.value = {},
+      refresh() 
+}
+
+})
+paginationLength.value = Math.ceil(data.value.count / 2);
+function changePage(page) {
+  pageNumber.value = page;
+  query.value = { ...route.query, page: pageNumber };
+
+  router.push({
+    path: "/courses",
+    query: query.value,
+  });
+  refresh();
+}
+function prevPage(){
+  if (pageNumber.value > 1) {
+    pageNumber.value -= 1
+    query.value = { ...route.query, page: pageNumber };
+  router.push({
+    path: "/courses",
+    query: query.value,
+  });
+  refresh();
+  }
+}
+function nextPage(num){
+  if (pageNumber.value < 7) {
+    pageNumber.value++
+    query.value = { ...route.query, page: pageNumber };
+  
+  router.push({
+    path: "/courses",
+    query: query.value,
+  });
+  refresh();
+    
+  }
+}
+const categoryLis = await useFetch("/api/category");
+const categories = categoryLis.data.value;
+function selectCategory(id) {
+  query.value = { ...route.query, category: id };
+  if (query.value.hasOwnProperty("page")) {
+    delete query.value.page;
+  }
+  router.push({
+    path: "/courses",
+    query: query.value,
+  });
+  refresh();
+}
+
+
+function sortByHandler(param){
+  console.log(param);
+  query.value = { ...route.query, price: param };
+
+  if (param === '') {
+    if (query.value.hasOwnProperty("price")) {
+      delete query.value.price;
+    }
+    
+  }
+  router.push({
+    path: "/courses",
+    query: query.value,
+  });
+  refresh();
+}
+
+
+watch(data , () => {
+  paginationLength.value = Math.ceil(data.value.count / 2); 
+
+})
+
+
+const openSortOptions = () => {
+  if (process.client) {
+    document
+      .getElementById("filters")
+      .classList.remove("translate-y-[80.769vw]");
+    document.getElementsByTagName("html")[0].classList.add("overflow-hidden");
+    document.getElementById("brightnessFilter").style.filter =
+      "brightness(50%)";
+    document.getElementById("brightnessFilter").style.backdropFilter =
+      "brightness(90%)";
+  }
+};
+
+</script>
+
+<style>
+.active::before {
+  content: "";
+  position: absolute;
+  background-color: #0d3f40;
+  width: 100%;
+  height: 0.01vw;
+  top: 2vw;
+}
+</style>
@@ -1,5 +1,4 @@
 <template>
-
      <home-pageIntro />
      <home-pageSuggested-courses />
      <home-pageInformation />
@@ -1,10 +1,16 @@
 export default defineEventHandler(async (event) => {
    const { public: { apiBase } } = useRuntimeConfig();
-     const body = await readBody(event);
-     console.log(body);
-    
-    try {
-        const data = await $fetch(`${apiBase}/course${body.changeCategory}`, {
+
+     const query = getQuery(event);
+    console.log('server query :',query);
+    // const category = '/category/' + query.category
+     let category = query.hasOwnProperty('category') ? `categoryId=${query.category}` : '';
+     let page = query.hasOwnProperty('page') ? `page=${query.page}` : '';
+     let sortBy = query.hasOwnProperty('price') ? `price=${query.price}` : '';
+   // const category = 'categoryId=66587ae698d0a0db14693a5e'
+   // const page = 'page=1'
+     try {
+        const data = await $fetch(`${apiBase}/course?${category}&${page}&${sortBy}&pageSize=2`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',