change design dashboards all page and search clinics

components/searchHead/SmSearch.js

@@ -1,71 +0,0 @@
-import SearchD from "@/components/icons/SearchD";
-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);
-
-  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"
-    >
-      <Autocomplete
-        freeSolo
-        options={data}
-        getOptionLabel={(option) => option.name}
-        inputValue={inputValue}
-        className="!w-full"
-        onInputChange={(event, newInputValue) => {
-          setInputValue(newInputValue);
-          handleSearch(newInputValue);
-        }}
-        onChange={(event, newValue) => {
-          setSelectedOption(newValue);
-          handleSearch(newValue ? newValue.name : "");
-        }}
-        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(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] 
-          !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
-          !min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px] 
-          !min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px] 
-        "
-      >
-        <SearchD />
-      </Button>
-    </ButtonGroup>
-  );
-}
-
-export default SmSearch;

components/searchHead/smSearch/AutoCompleteSearch.js

@@ -0,0 +1,54 @@
+import { Autocomplete, TextField } from "@mui/material";
+
+function AutoCompleteSearch({
+  data,
+  inputValue,
+  placeholder,
+  handleSearch,
+  setInputValue,
+  setSelectedOption,
+}) {
+  return (
+    <Autocomplete
+      freeSolo
+      options={data}
+      getOptionLabel={(option) => option.name}
+      inputValue={inputValue}
+      className="!w-full"
+      onInputChange={(event, newInputValue) => {
+        setInputValue && setInputValue(newInputValue);
+        handleSearch(newInputValue);
+      }}
+      onChange={(event, newValue) => {
+        setSelectedOption(newValue);
+        handleSearch(newValue ? newValue.name : "");
+      }}
+      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"
+        />
+      )}
+    />
+  );
+}
+
+export default AutoCompleteSearch;

components/searchHead/smSearch/index.js

@@ -0,0 +1,41 @@
+import SearchD from "@/components/icons/SearchD";
+import { Button, ButtonGroup } from "@mui/material";
+import { useState } from "react";
+import AutoCompleteSearch from "./AutoCompleteSearch";
+
+function SmSearch({ placeholder, handleSearch, data }) {
+  const [inputValue, setInputValue] = useState("");
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  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"
+    >
+      <AutoCompleteSearch
+        data={data}
+        inputValue={inputValue}
+        placeholder={placeholder}
+        handleSearch={handleSearch}
+        setInputValue={setInputValue}
+        setSelectedOption={setSelectedOption}
+      />
+      <Button
+        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] 
+          !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
+          !min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px] 
+          !min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px] 
+        "
+      >
+        <SearchD />
+      </Button>
+    </ButtonGroup>
+  );
+}
+
+export default SmSearch;