add auto-selecotr to home page and handle set in data, search in specialties and send req for filter && add locations and change text

components/doctors/search/SearchField.js

@@ -1,33 +1,16 @@
-import { TextField } from "@mui/material";
-import React from "react";
+import AutoCompleteSearch from "@/components/searchHead/smSearch/AutoCompleteSearch";
+import specialties from "@/data/specialties.json";
 
 function SearchField({ filter, updateData }) {
   return (
-    <TextField
-      variant="standard"
-      value={filter.name}
-      onChange={(e) => updateData("name", e.target.value)}
-      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",
-        },
-      }}
-      dir="rtl"
-      placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
-      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]`}
-    />
+    <div className="!min-w-[50%] !w-[524px]">
+      <AutoCompleteSearch
+        data={specialties}
+        inputValue={filter.name}
+        handleSearch={(e) => updateData("name", e)}
+        placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
+      />
+    </div>
   );
 }
 

components/doctors/search/SendReq.js

@@ -1,14 +1,43 @@
 import { Button } from "@mui/material";
 import SearchD from "@/components/icons/SearchD";
 import { useState } from "react";
+import specialties from "@/data/specialties.json";
 
-function SendReq({ sendReq }) {
+function SendReq({ filter, setFilter, setDataInURL, sendReq }) {
   const [loading, setLoading] = useState(false);
+  const checkName = () => {
+    let newFilter = filter;
+    let reqData = filter;
+    const specialtyItem = specialties.find((item) =>
+      item.name.includes(filter.name)
+    );
+
+    if (specialtyItem) {
+      if (specialtyItem.parent) {
+        newFilter.specialty = specialtyItem;
+        newFilter.category = specialties.find(
+          (item) => item.id === specialtyItem.parent
+        );
+      } else {
+        newFilter.specialty = specialtyItem;
+      }
+      reqData = newFilter;
+      reqData.name = "";
+    } else {
+      reqData = newFilter;
+    }
+
+    setFilter(newFilter);
+    setDataInURL(newFilter);
+
+    return reqData;
+  };
 
   const filterData = () => {
     setLoading(true);
+    const reqData = checkName();
 
-    sendReq().finally(() => {
+    sendReq(reqData).finally(() => {
       setLoading(false);
     });
   };

components/doctors/search/index.js

@@ -5,13 +5,7 @@ import FilterModal from "../modal/FilterModal";
 import SendReq from "./SendReq";
 import SearchField from "./SearchField";
 
-function SearchBar({
-  filter,
-  sendReq,
-  setFilter,
-  updateData,
-  setDataInURL,
-}) {
+function SearchBar({ filter, sendReq, setFilter, updateData, setDataInURL }) {
   return (
     <ButtonGroup
       variant="contained"
@@ -43,7 +37,12 @@ function SearchBar({
         </Button>
       </FilterModal>
       <SearchField filter={filter} updateData={updateData} />
-      <SendReq sendReq={sendReq} />
+      <SendReq
+        filter={filter}
+        sendReq={sendReq}
+        setFilter={setFilter}
+        setDataInURL={setDataInURL}
+      />
     </ButtonGroup>
   );
 }