create searchBox section

pages/courses/index.vue

@@ -61,6 +61,8 @@
             </svg>
 
             <input
+            v-model="search"
+            @change="searchHandler"
               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="نام آموزش ، دوره و ... را وارد کنید"
@@ -450,6 +452,7 @@ function prevPage(){
   if (pageNumber.value > 1) {
     pageNumber.value -= 1
     query.value = { ...route.query, page: pageNumber };
+    
   router.push({
     path: "/courses",
     query: query.value,
@@ -482,12 +485,16 @@ function removeCategory(){
   }
   if (query.value.hasOwnProperty("price")) {
     delete query.value.price;
+  }
+  if (query.value.hasOwnProperty("name")) {
+    delete query.value.name;
   }
     router.push({
     path: "/courses",
     query: query.value,
   });
   pageNumber.value = 1
+  search.value = null
   refresh()
 }
 
@@ -499,6 +506,7 @@ const categories = categoryLis.data.value;
 
 function selectCategory(id) {
   query.value = { ...route.query, category: id };
+  
   if (query.value.hasOwnProperty("page")) {
     delete query.value.page;
   }
@@ -514,9 +522,9 @@ function selectCategory(id) {
   });
   pageNumber.value = 1
   refresh();
-  watch(data , () => {
-  paginationLength.value = Math.ceil(data.value.count / 2); 
-})
+//   watch(data , () => {
+//   paginationLength.value = Math.ceil(data.value.count / 2); 
+// })
 }
 
 
@@ -565,8 +573,26 @@ const closeSortOptions = () => {
   }
 };
 
+const search = ref(null)
+// watch(search, () =>{
+//  if (search.value.length > 2) {
 
-
+//  }
+// })
+const searchHandler = () =>{
+  query.value = { ...route.query, name: search.value };
+  if (query.value.hasOwnProperty("page")) {
+      delete query.value.page;
+    }
+  router.push({
+    path: "/courses",
+    query: query.value,
+  });
+ refresh();
+}
+watch(data , () => {
+ paginationLength.value = Math.ceil(data.value.count / 2); 
+})
 
 
 </script>