84 lines
2.1 KiB
JavaScript
84 lines
2.1 KiB
JavaScript
import { Button } from "@mui/material";
|
|
|
|
// Icon
|
|
import CloseModalD from "@/components/icons/CloseModalD";
|
|
import ArrowLeftM from "@/components/icons/ArrowLeftM";
|
|
import { useState } from "react";
|
|
import AddressSelector from "./AddressSelector";
|
|
|
|
function Content({
|
|
state,
|
|
states,
|
|
filter,
|
|
setFilter,
|
|
handleClose,
|
|
modalLocate,
|
|
filteredCities,
|
|
}) {
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const updateData = (name, value) => {
|
|
setFilter((prev) => {
|
|
if (name === "state") {
|
|
return {
|
|
...prev,
|
|
state: value,
|
|
city: null,
|
|
};
|
|
}
|
|
return {
|
|
...prev,
|
|
[name]: value,
|
|
};
|
|
});
|
|
};
|
|
|
|
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={state}
|
|
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
|
|
loading={loading}
|
|
className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
|
|
onClick={modalLocate}
|
|
variant="contained"
|
|
color="primary"
|
|
disabled={!filter.city || !filter.state}
|
|
>
|
|
تایید و ادامه
|
|
<ArrowLeftM />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Content;
|