handle component modal in home page

app/component/modalSearchCity/ButtonFilter.js

@@ -0,0 +1,35 @@
+// Icons
+import ArrowBottomH from "@/components/icons/ArrowBottomH";
+import Location from "@/components/icons/Location";
+import { Button } from "@mui/material";
+
+function ButtonFilter({ selected }) {
+  return (
+    <div>
+      <Button
+        className="!border-none hover:!bg-transparent !py-[11.5px] !min-w-fit !px-[7px] sm:!py-3 sm:!px-[9px] md:!px-[11px] lg:!px-[12px] !rounded-3"
+        onClick={handleOpen}
+        variant="contained"
+        color="secondary"
+      >
+        <div className="min-w-[20px] min-h-[20px] hidden md:flex">
+          <Location />
+        </div>
+        <p
+          className={`text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] 
+                    md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1
+                    ${selected.first && selected.second ? "" : ""}`}
+        >
+          {selected.first && selected.second
+            ? `${selected.first} | ${selected.second}`
+            : "انتخاب شهر"}
+        </p>
+        <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
+          <ArrowBottomH />
+        </div>
+      </Button>
+    </div>
+  );
+}
+
+export default ButtonFilter;

app/component/modalSearchCity/index.js

@@ -15,7 +15,7 @@ import ArrowLeftM from "@/components/icons/ArrowLeftM";
 import statesData from "@/data/state.json";
 import citiesData from "@/data/city.json";
 
-function ModalSearchCity() {
+function ModalSearchCity({ children }) {
   const [states, setStates] = useState([]);
   const [cities, setCities] = useState([]);
   const [filteredCities, setFilteredCities] = useState([]);
@@ -101,6 +101,7 @@ function ModalSearchCity() {
           <ArrowBottomH />
         </div>
       </Button>
+
       {/* Content Modal */}
       <Modal open={open} onClose={handleClose}>
         <Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">

components/home/search/index.js

@@ -1,7 +1,7 @@
 import Search from "@/components/icons/Search";
 import { Button, ButtonGroup, TextField } from "@mui/material";
-import ModalSearchCity from "./modal";
 import SearchD from "@/components/icons/SearchD";
+import ModalSearchCity from "@/app/component/modalSearchCity";
 
 function SearchBar() {
   return (