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>
   );
 }

components/dashboard/userAccount/content/HeadTab.js

@@ -21,7 +21,7 @@ function HeadTab({
         />
       ) : (
         <>
-          <div className="!hidden md:!flex !w-full">
+          <div className="!w-full mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
             <Tabs
               style={{
                 ".MuiTabs-indicator": {

components/doctor/index.js

@@ -5,7 +5,6 @@ import AppointmentList from "./appointmentList";
 import DetailDoctor from "./detailDoctor";
 import Share from "./detailDoctor/Share";
 import CustomLoading from "@/app/component/loading/Custom";
-import Poster from "./poster";
 
 function DoctorPage({ doctor }) {
   const [loading, setLoading] = useState(true);

components/searchHead/SmSearch.js

@@ -1,36 +1,59 @@
 import SearchD from "@/components/icons/SearchD";
-import { Button, ButtonGroup, TextField } from "@mui/material";
+import { Autocomplete, TextField, Button, ButtonGroup } from "@mui/material";
+import { useState } from "react";
+
+function SmSearch({ placeholder, handleSearch, data }) {
+  const [inputValue, setInputValue] = useState("");
+  const [selectedOption, setSelectedOption] = useState(null);
 
-function SmSearch({ placeholder, handleSearch }) {
   return (
     <ButtonGroup
       variant="contained"
       className="!bg-[#FFF] !w-full lg:!w-2/3 !mt-[15px] !rounded-lg !overflow-hidden 
-            flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
-            !h-fit !p-1"
+        flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+        !h-fit !p-1"
     >
-      <TextField
-        variant="standard"
-        onChange={(e) => handleSearch(e.target.value)}
-        InputProps={{
-          disableUnderline: true,
+      <Autocomplete
+        freeSolo
+        options={data}
+        getOptionLabel={(option) => option.name}
+        inputValue={inputValue}
+        className="!w-full"
+        onInputChange={(event, newInputValue) => {
+          setInputValue(newInputValue);
+          handleSearch(newInputValue);
         }}
-        sx={{
-          background: "transparent !important",
-          "& .MuiInputBase-root": { height: "100%" },
-          "& .MuiInput-root": { borderBottom: "none" },
-          "& .MuiInputBase-input": {
-            background: "transparent",
-            color: "#7E7E7E",
-            padding: "0",
-          },
+        onChange={(event, newValue) => {
+          setSelectedOption(newValue);
+          handleSearch(newValue ? newValue.name : "");
         }}
-        placeholder={placeholder}
-        dir="rtl"
-        className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            variant="standard"
+            placeholder={placeholder}
+            dir="rtl"
+            InputProps={{
+              ...params.InputProps,
+              disableUnderline: true,
+              style: { height: "100%" },
+            }}
+            sx={{
+              background: "transparent !important",
+              "& .MuiInputBase-input": {
+                background: "#FAFAFA",
+                color: "#6C757D",
+                padding: "0 16px",
+                fontSize: "14px",
+                fontFamily: "inherit",
+              },
+            }}
+            className="!shadow-none !w-full !px-5 !h-full !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal"
+          />
+        )}
       />
       <Button
-        onClick={handleSearch}
+        onClick={() => handleSearch(inputValue)}
         className="
           !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4
           !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 

components/specialties/index.js

@@ -20,7 +20,11 @@ function SpecialtiesPage() {
         title="تخصص مورد نظر شما چیست؟"
         detail="تخصص مورد نظرتان را جستجو کرده و یا از لیست زیر انتخاب نمایید:"
       >
-        <SmSearch placeholder="جستجوی تخصص" handleSearch={handleSearch} />
+        <SmSearch
+          data={specialtiesData}
+          placeholder="جستجوی تخصص"
+          handleSearch={handleSearch}
+        />
       </HeadPageList>
       <List specialties={filteredSpecialties} />
     </div>