modal search and default valud of province and city and handle search && show searched state in clinics page

components/clinics/head/SearchBar.js

@@ -1,4 +1,3 @@
-"use client";
 
 import { Button, ButtonGroup, TextField } from "@mui/material";
 import SearchD from "@/components/icons/SearchD";
@@ -6,11 +5,7 @@ import ModalSearchCity from "@/app/component/modalSearchCity";
 import { useState } from "react";
 import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
 
-function SearchBar() {
-  const [selected, setSelected] = useState({
-    province: "",
-    city: "",
-  });
+function SearchBar({ selected, setSelected, state, handleSearch }) {
   const [open, setOpen] = useState(false);
 
   return (
@@ -23,6 +18,7 @@ function SearchBar() {
     >
       <ModalSearchCity
         open={open}
+        state={state}
         setOpen={setOpen}
         selected={selected}
         setSelected={setSelected}
@@ -31,6 +27,7 @@ function SearchBar() {
       </ModalSearchCity>
       <TextField
         variant="standard"
+        onChange={e => handleSearch(e.target.value)}
         InputProps={{
           disableUnderline: true,
         }}