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

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]