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"

components/home/search/modal/index.js

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { Box, Button, Modal } from "@mui/material";
+
+// Icon
+import ArrowBottomH from "@/components/icons/ArrowBottomH";
+import Location from "@/components/icons/Location";
+import { styleDefault } from "@/mui";
+import CloseModalD from "@/components/icons/CloseModalD";
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+import ArrowLeftM from "@/components/icons/ArrowLeftM";
+
+function ModalSearchCity() {
+
+    const states = [
+        { label: 'تهران', id: 10 },
+        { label: 'اصفهان', id: 20 },
+        { label: 'مازندران', id: 30 }
+    ];
+
+    const cities = [
+        { label: 'شهر یک', id: 10 },
+        { label: 'شهر دو', id: 20 },
+        { label: 'شهر سه', id: 30 }
+    ];
+
+    const [open, setOpen] = useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+    return (
+        <div>
+            {/* Button Modal */}
+            <Button
+                className="!border-none hover:!bg-transparent"
+                onClick={handleOpen}
+                variant="contained"
+                color="secondary"
+            >
+                <div className="min-w-[20px] min-h-[20px]">
+                    <Location />
+                </div>
+                <p className="text-[#616161] text-[16px] font-medium mx-1">انتخاب شهر</p>
+                <ArrowBottomH />
+            </Button>
+            {/* Content Modal */}
+            <Modal
+                open={open}
+                onClose={handleClose}
+            >
+                <Box sx={styleDefault}>
+                    <div
+                        className="flex justify-end w-full"
+                    >
+                        <div className="cursor-pointer" onClick={handleClose}>
+                            <CloseModalD />
+                        </div>
+                    </div>
+                    <div className="px-2">
+                        <p className="text-[#525252] mt-4 text-[16px] font-medium text-center">شهر یا استان مورد نظر را انتخاب نمایید:</p>
+                        <div className="flex flex-col mt-8 mb-14 justify-center items-center gap-10">
+                            <AutoCompleteSelect
+                                list={states}
+                                label='استان'
+                            />
+                            <AutoCompleteSelect
+                                list={cities}
+                                label='شهر'
+                            />
+                        </div>
+                        <div className="w-full flex justify-end">
+                            <Button
+                                variant="contained"
+                                color="primary"
+                                className="flex !px-3 items-center justify-center gap-1 mr-auto"
+                            >
+                                تایید و ادامه
+                                <ArrowLeftM />
+                            </Button>
+                        </div>
+                    </div>
+                </Box>
+            </Modal>
+        </div>
+    )
+}
+
+export default ModalSearchCity