modal page home set state

components/home/search/index.js

@@ -1,6 +1,8 @@
 import Search from "@/components/icons/Search";
 import Location from "@/components/icons/Location";
 import { Button, ButtonGroup, TextField } from "@mui/material";
+import ArrowBottomH from "@/components/icons/ArrowBottomH";
+import ModalSearchCity from "./modal";
 
 function SearchBar() {
     return (
@@ -8,12 +10,7 @@ function SearchBar() {
             variant="contained"
             className="!py-3 !pl-4 !gap-3 !bg-[#FAFAFA] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
         >
-            <Button className="!border-none" color="secondary" variant="contained">
-                <div className="min-w-[20px] min-h-[20px]">
-                    <Location />
-                </div>
-                <p className="text-[#616161] text-[16px] font-medium mr-1">انتخاب شهر</p>
-            </Button>
+            <ModalSearchCity />
             <span className="black w-px h-12 bg-[#EFEFEF]"></span>
             <TextField
                 variant="standard"