Files
nobat724_front/app/component/modalSearchCity/Content.js
T

88 lines
2.3 KiB
JavaScript

import { Button } from "@mui/material";
// Icon
import CloseModalD from "@/components/icons/CloseModalD";
import ArrowLeftM from "@/components/icons/ArrowLeftM";
import AddressSelector from "./AddressSelector";
import { getStateInfoClient } from "@/lib/getStateInfoClient";
function Content({
states,
filter,
sendReq,
setFilter,
handleClose,
setDataInURL,
filteredCities,
}) {
const { matchedState } = getStateInfoClient();
const handleClick = () => {
handleClose();
sendReq();
};
const updateData = (name, value) => {
const newFilter =
name === "state"
? {
...filter,
state: value,
city: null,
}
: {
...filter,
[name]: value,
};
setDataInURL(newFilter);
setFilter(newFilter);
};
return (
<div>
<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 md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
<AddressSelector
name="state"
list={states}
label="استان"
disabled={matchedState}
value={filter?.state}
updateData={updateData}
/>
<AddressSelector
name="city"
label="شهر"
value={filter?.city}
list={filteredCities}
updateData={updateData}
disabled={!filter?.state}
/>
</div>
<div className="w-full flex justify-end">
<Button
disabled={!filter?.city || !filter?.state}
className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
onClick={handleClick}
variant="contained"
color="primary"
>
تایید و ادامه
<ArrowLeftM />
</Button>
</div>
</div>
</div>
);
}
export default Content;