update modals & text & design

components/doctors/index.js

@@ -6,22 +6,46 @@ import SortList from "./sortlist";
 import ListDoctors from "./listDoctors";
 import LocationD from "../icons/LocationD";
 import { useSearchParams } from "next/navigation";
+import ModalSearchCity from "@/app/component/modalSearchCity";
 import { useProvince } from "@/context/ProvinceProvider";
+import { Button } from "@mui/material";
+
+// Data
+import citiesData from "@/data/city.json";
+import statesData from "@/data/state.json";
 
 function DoctorsPage() {
   const [loading, setLoading] = useState(true);
-  const searchParams = useSearchParams();
+  const [open, setOpen] = useState(false);
   const { isProvinceInclude } = useProvince();
+  const [selected, setSelected] = useState({
+    // province: isProvinceInclude?.name || locationSelected.province,
+    // city: locationSelected.city || newCity,
+    province: isProvinceInclude?.name,
+    city: null,
+  });
+  const searchParams = useSearchParams();
   const locationSelected = {
     province: searchParams.get("province"),
     city: searchParams.get("city"),
   };
+  const provinceId = statesData.find(
+    (state) => state.name === locationSelected?.province
+  );
+
+  const newCity =
+    locationSelected.city ||
+    (provinceId &&
+      citiesData.find((city) => city.province_id === provinceId.id)?.name);
+
   const [data, setData] = useState({
     expertise: "",
     gender: 0,
     degree: 0,
     turn: true,
   });
+  console.log(newCity);
+
 
   useEffect(() => {
     setTimeout(() => {
@@ -32,16 +56,25 @@ function DoctorsPage() {
   return (
     <div className="pt-[95px] sm:pt-[120px] padding-responsive">
       <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
-        <div className="flex items-center justify-start gap-2 w-full">
-          <LocationD />
-          <p className="text-[#525252] text-[16px] font-semibold">
-            {" "}
-            {isProvinceInclude?.name || locationSelected.province || "استان"}
-            {/* {isProvinceInclude?.name ? "" : " / "} */}
-            {" / "}
-            {locationSelected.city || "شهر"}
-          </p>
-        </div>
+        <ModalSearchCity
+          open={open}
+          setOpen={setOpen}
+          selected={selected}
+          setSelected={setSelected}
+        >
+          <Button
+            className="!flex !ml-auto !w-fit !px-3 !py-1 !items-center !justify-start !gap-2 !cursor-pointer"
+            onClick={() => setOpen(true)}
+          >
+            <LocationD />
+            <p className="text-[#525252] text-[16px] font-semibold">
+              {" "}
+              {selected.province || "استان"}
+              {" / "}
+              {selected.city || "شهر"}
+            </p>
+          </Button>
+        </ModalSearchCity>
         <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
           <SearchBar data={data} setData={setData} />
           <SortList data={data} setData={setData} />