117 lines
3.8 KiB
JavaScript
117 lines
3.8 KiB
JavaScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { styleDefault } from "@/mui";
|
|
import { Box, Button, Modal } from "@mui/material";
|
|
|
|
// Icon
|
|
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
|
import CloseOrangeModal from "@/components/icons/CloseOrangeModal";
|
|
import ArrowBottomD from "@/components/icons/ArrowBottomD";
|
|
import ArrowLeftM from "@/components/icons/ArrowLeftM";
|
|
import SettingD from "@/components/icons/SettingD";
|
|
|
|
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 });
|
|
|
|
return (
|
|
<>
|
|
{/* Button Modal */}
|
|
<Button
|
|
className="
|
|
!border-none !min-w-fit lg:!min-w-[122px] !bg-[#F8F8FF] !rounded-l-none
|
|
!py-[15px] !px-[6px] md:!py-[17px] md:!px-[5px] lg:!py-[20px] lg:!px-[8px]
|
|
"
|
|
onClick={handleOpen}
|
|
variant="contained"
|
|
color="secondary"
|
|
>
|
|
<div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px]">
|
|
<SettingD />
|
|
</div>
|
|
<p className="text-[#616161] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-medium mx-2">
|
|
{/* {selected.first && selected.second ?
|
|
`${selected.first} | ${selected.second}` : 'فیلترها'} */}
|
|
فیلترها
|
|
</p>
|
|
<div className="w-[16px] h-[16px] md:w-[20px] md:h-[20px] lg:w-[24px] lg:h-[24px]">
|
|
<ArrowBottomD />
|
|
</div>
|
|
</Button>
|
|
{/* Content Modal */}
|
|
<Modal open={open} onClose={handleClose}>
|
|
<Box
|
|
sx={styleDefault}
|
|
className="!w-full md:!min-w-[424px] !h-full md:!w-fit md:!h-fit"
|
|
>
|
|
<div className="flex justify-between w-full">
|
|
<p className="text-[#3B3B3B] text-[20px] font-bold">فیلترها</p>
|
|
<Button
|
|
className="cursor-pointer !p-0 flex items-center justify-center gap-1"
|
|
onClick={handleClose}
|
|
variant="text"
|
|
>
|
|
<CloseOrangeModal />
|
|
<p className="text-[#F17732] text-[14px] font-normal">حذف همه</p>
|
|
</Button>
|
|
</div>
|
|
<div className="px-[24px] pb-[24px]">
|
|
<p className="text-[#525252] mt-[32px] text-[16px] font-medium text-center">
|
|
شهر یا استان مورد نظر را انتخاب نمایید:
|
|
</p>
|
|
<div className="flex flex-col mt-[44px] mb-[56px] justify-center items-center gap-10">
|
|
<AutoCompleteSelect
|
|
updateData={updateData}
|
|
label="استان"
|
|
list={states}
|
|
name="first"
|
|
/>
|
|
<AutoCompleteSelect
|
|
updateData={updateData}
|
|
list={cities}
|
|
name="second"
|
|
label="شهر"
|
|
/>
|
|
</div>
|
|
<div className="w-full flex justify-end">
|
|
<Button
|
|
color="primary"
|
|
variant="contained"
|
|
className="flex !px-3 items-center justify-center gap-1 mr-auto"
|
|
onClick={handleClose}
|
|
>
|
|
تایید و ادامه
|
|
<ArrowLeftM />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Box>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ModalSearchCity;
|