107 lines
4.2 KiB
JavaScript
107 lines
4.2 KiB
JavaScript
'use client';
|
|
|
|
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);
|
|
|
|
const [selected, setSelected] = useState({
|
|
first: '',
|
|
second: ''
|
|
});
|
|
|
|
const updateData = (event, name) =>
|
|
setSelected({ ...selected, [name]: event.target.innerText })
|
|
|
|
return (
|
|
<>
|
|
{/* Button Modal */}
|
|
<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-[16px] 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}` : 'انتخاب شهر'}
|
|
</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>
|
|
{/* Content Modal */}
|
|
<Modal
|
|
open={open}
|
|
onClose={handleClose}
|
|
>
|
|
<Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">
|
|
<div
|
|
className="flex justify-end w-full"
|
|
>
|
|
<div className="cursor-pointer" onClick={handleClose}>
|
|
<CloseModalD />
|
|
</div>
|
|
</div>
|
|
<div className="md:p-[24px] pt-0">
|
|
<p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">شهر یا استان مورد نظر را انتخاب نمایید:</p>
|
|
<div className="flex flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
|
|
<AutoCompleteSelect
|
|
updateData={updateData}
|
|
list={states}
|
|
label='استان'
|
|
name='first'
|
|
/>
|
|
<AutoCompleteSelect
|
|
updateData={updateData}
|
|
list={cities}
|
|
name='second'
|
|
label='شهر'
|
|
/>
|
|
</div>
|
|
<div className="w-full flex justify-end">
|
|
<Button
|
|
className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
|
|
onClick={handleClose}
|
|
variant="contained"
|
|
color="primary"
|
|
>
|
|
تایید و ادامه
|
|
<ArrowLeftM />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Box>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ModalSearchCity |