change key field to specialty, filter list doctors with name, remove loading state from doctors page, save state id in url

components/doctors/search/index.js

@@ -1,13 +1,16 @@
-import { Button, ButtonGroup, TextField } from "@mui/material";
+import { Button, ButtonGroup } from "@mui/material";
 import SettingD from "@/components/icons/SettingD";
 import ArrowBottomD from "@/components/icons/ArrowBottomD";
-import SearchD from "@/components/icons/SearchD";
 import FilterModal from "../modal/FilterModal";
+import SendReq from "./SendReq";
+import { useState } from "react";
+import SearchField from "./SearchField";
 
 function SearchBar({
   data,
+  fields,
   setData,
-  params,
+  setFields,
   setDoctors,
   matchedCity,
   matchedState,
@@ -18,8 +21,8 @@ function SearchBar({
     <ButtonGroup
       variant="contained"
       className="!bg-[#FFF] !w-full lg:!w-[60%] lg:!max-w-[734px] !rounded-lg !overflow-hidden 
-            flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
-            !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
+        flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+        !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
     >
       <FilterModal
         data={data}
@@ -31,9 +34,9 @@ function SearchBar({
         setConfirmedData={setConfirmedData}
       >
         <Button
-          className="!border-none !hidden lg:!flex !max-h-full !min-w-fit !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
-          variant="contained"
           color="secondary"
+          variant="contained"
+          className="!border-none !hidden lg:!flex !max-h-full !min-w-fit !h-[64px] !px-2 !bg-[#F8F8FF] !rounded-l-none"
         >
           <div className="min-w-[20px] min-h-[20px]">
             <SettingD />
@@ -46,38 +49,13 @@ function SearchBar({
           </div>
         </Button>
       </FilterModal>
-      <TextField
-        variant="standard"
-        defaultValue={params.search || ""}
-        InputProps={{
-          disableUnderline: true,
-        }}
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          width: "100% !important",
-          "& .MuiInput-root": {
-            padding: "0",
-            borderBottom: "none",
-          },
-          "& .MuiInputBase-input": {
-            color: "#6C757D",
-            padding: "0px",
-          },
-        }}
-        placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
-        dir="rtl"
-        className={`!shadow-none !px-5 !h-full !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
+      <SearchField fields={fields} setFields={setFields} />
+      <SendReq
+        fields={fields}
+        setDoctors={setDoctors}
+        matchedCity={matchedCity}
+        matchedState={matchedState}
       />
-      <Button
-        className="!flex !m-1 !rounded-[4px] !w-[36px] sm:!w-[42px] md:!w-[49px] lg:!w-[56px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px]
-                !gap-2.5 !p-2.5 md:!p-4 !h-[calc(100%_-_8px)]"
-      >
-        <div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px]">
-          <SearchD />
-        </div>
-      </Button>
     </ButtonGroup>
   );
 }