autoselector page clinic item and specialties & dashboard responsive & change components & change package universal-cookie to js-cookie

components/clinic/components/doctors/List.js

@@ -10,7 +10,7 @@ function List({ doctors, loading }) {
         ))}
       </ul>
       <div className="mt-[56px] flex justify-center">
-        <Pagination />
+        <Pagination list={doctors} itemsPerPage={12} />
       </div>
     </>
   );

components/clinic/components/doctors/SearchBar.js

@@ -1,11 +0,0 @@
-import SmSearch from "@/components/searchHead/SmSearch";
-
-function SearchBar() {
-  return (
-    <div className="flex justify-center">
-      <SmSearch placeholder="جستجوی پزشک یا تخصص" />
-    </div>
-  );
-}
-
-export default SearchBar;

components/clinic/components/doctors/index.js

@@ -1,11 +1,26 @@
+"use client";
+
+import SmSearch from "@/components/searchHead/SmSearch";
 import List from "./List";
-import SearchBar from "./SearchBar";
+import { useState } from "react";
+import { searchOnList } from "@/helper";
 
 function Doctors({ doctors, loading }) {
+  const [filteredSpecialties, setFilteredSpecialties] = useState(doctors);
+
+  const handleSearch = (value) =>
+    setFilteredSpecialties(searchOnList(doctors, value, "name"));
+
   return (
     <div className="opacity-page">
-      <SearchBar />
-      <List loading={loading} doctors={doctors} />
+      <div className="flex justify-center">
+        <SmSearch
+          data={doctors}
+          handleSearch={handleSearch}
+          placeholder="جستجوی پزشک یا تخصص"
+        />
+      </div>
+      <List loading={loading} doctors={filteredSpecialties} />
     </div>
   );
 }