send data location with url to doctors and get it and show in page doctors

app/component/modalSearchCity/ButtonFilter.js

@@ -20,10 +20,12 @@ function ButtonFilter({ selected, setOpen }) {
         <p
           className={`text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] 
                     md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1
-                    ${selected && selected.first && selected.second ? "" : ""}`}
+                    ${
+                      selected && selected.province && selected.city ? "" : ""
+                    }`}
         >
-          {selected && selected.first && selected.second
+          {selected && selected.province && selected.city
-            ? `${selected.first} | ${selected.second}`
+            ? `${selected.province} | ${selected.city}`
             : "انتخاب شهر"}
         </p>
         <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">

app/component/modalSearchCity/index.js

@@ -14,8 +14,8 @@ import statesData from "@/data/state.json";
 import citiesData from "@/data/city.json";
 
 function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
-  const secondSelected = selected.second;
+  const provinceSelected = selected.province;
-  const firstSelected = selected.first;
+  const citySelected = selected.city;
   const [states, setStates] = useState([]);
   const [cities, setCities] = useState([]);
   const [filteredCities, setFilteredCities] = useState([]);
@@ -43,9 +43,9 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
 
   // Filter cities when state is selected
   useEffect(() => {
-    if (firstSelected) {
+    if (provinceSelected) {
       const selectedState = states.find(
-        (state) => state.label === firstSelected
+        (state) => state.label === provinceSelected
       );
       if (selectedState) {
         const stateId = selectedState.id;
@@ -56,14 +56,14 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
       }
     } else {
       setFilteredCities([]);
-      setSelected({ ...selected, second: "" });
+      setSelected({ ...selected, city: "" });
     }
-  }, [firstSelected, cities, states]);
+  }, [provinceSelected, cities, states]);
 
   const updateData = (event, name) => {
-    if (name === "first" && event !== firstSelected) {
+    if (name === "province" && event !== provinceSelected) {
       // If state changes, reset city selection
-      setSelected({ first: event, second: "" });
+      setSelected({ province: event, city: "" });
     } else {
       setSelected({ ...selected, [name]: event });
     }
@@ -89,25 +89,23 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
             <div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
               <AutoCompleteSelect
                 updateData={updateData}
-                value={selected && firstSelected}
+                value={selected && provinceSelected}
                 list={states}
                 label="استان"
-                name="first"
+                name="province"
               />
               <AutoCompleteSelect
                 updateData={updateData}
                 value={
                   selected &&
-                  secondSelected &&
+                  citySelected &&
-                  filteredCities.find(
+                  filteredCities.find((item) => item.label === citySelected) &&
-                    (item) => item.label === secondSelected
+                  citySelected
-                  ) &&
-                  secondSelected
                 }
                 list={filteredCities}
-                name="second"
+                name="city"
                 label="شهر"
-                disabled={!firstSelected || filteredCities.length === 0}
+                disabled={!provinceSelected || filteredCities.length === 0}
               />
             </div>
             <div className="w-full flex justify-end">
@@ -116,7 +114,7 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
                 onClick={handleClose}
                 variant="contained"
                 color="primary"
-                disabled={!firstSelected || !secondSelected}
+                disabled={!provinceSelected || !citySelected}
               >
                 تایید و ادامه
                 <ArrowLeftM />

components/doctors/index.js

@@ -5,9 +5,15 @@ import SearchBar from "./search";
 import SortList from "./sortlist";
 import ListDoctors from "./listDoctors";
 import LocationD from "../icons/LocationD";
+import { useSearchParams } from "next/navigation";
 
 function DoctorsPage() {
   const [loading, setLoading] = useState(true);
+  const searchParams = useSearchParams();
+  const locationSelected = {
+    province: searchParams.get("province"),
+    city: searchParams.get("city"),
+  };
   const [data, setData] = useState({
     expertise: "",
     gender: 0,
@@ -27,14 +33,16 @@ function DoctorsPage() {
         <div className="flex items-center justify-start gap-2 w-full">
           <LocationD />
           <p className="text-[#525252] text-[16px] font-semibold">
-            خوزستان / اهواز
+            {" "}
+            {locationSelected.province || "استان"} /{" "}
+            {locationSelected.city || "شهر"}
           </p>
         </div>
         <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} />
         </div>
-      </div> 
+      </div>
       <ListDoctors loading={loading} />
     </div>
   );

components/home/search/index.js

@@ -6,23 +6,23 @@ import SearchD from "@/components/icons/SearchD";
 import ModalSearchCity from "@/app/component/modalSearchCity";
 import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
 import { useState } from "react";
+import Link from "next/link";
 
 function SearchBar() {
   const [selected, setSelected] = useState({
-    first: "",
+    province: "",
-    second: "",
+    city: "",
   });
   const [open, setOpen] = useState(false);
-  console.log(selected);
 
   return (
     <ButtonGroup
       variant="contained"
       className="
-            !py-[4px] sm:!py-[7px] md:!py-[10px] lg:!py-[12px] !gap-3
+        !py-[4px] sm:!py-[7px] md:!py-[10px] lg:!py-[12px] !gap-3
-            !px-[4px] sm:!px-[8px] md:!px-[12px] lg:!px-[16px] !mt-[22px] sm:!mt-[34px] md:!mt-[46px] lg:!mt-[60px]
+        !px-[4px] sm:!px-[8px] md:!px-[12px] lg:!px-[16px] !mt-[22px] sm:!mt-[34px] md:!mt-[46px] lg:!mt-[60px]
-            !bg-[#FAFAFA] !transition-all !duration-500 !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full lg:w-fit
+        !bg-[#FAFAFA] !transition-all !duration-500 !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full lg:w-fit
-            "
+      "
     >
       <ModalSearchCity
         open={open}
@@ -54,12 +54,22 @@ function SearchBar() {
         dir="rtl"
         className={`!shadow-none !w-full lg:!w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !rounded-0 !font-normal !text-[#6C757D]`}
       />
-      <Button className="!hidden lg:!flex !rounded-[4px] !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !gap-2.5 !min-w-[114px]">
+      <Link
-        <div className="min-w-[20px] min-h-[20px]">
+        href={{
-          <Search />
+          pathname: "/doctors",
-        </div>
+          query: {
-        <p>جستجو</p>
+            province: selected.province,
-      </Button>
+            city: selected.city,
+          },
+        }}
+      >
+        <Button className="!hidden lg:!flex !rounded-[4px] !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !gap-2.5 !min-w-[114px]">
+          <div className="min-w-[20px] min-h-[20px]">
+            <Search />
+          </div>
+          <p>جستجو</p>
+        </Button>
+      </Link>
       <Button
         className="!flex lg:!hidden !rounded-[4px] 
                 !w-[40px] sm:!w-[42px] md:!w-[45px] lg:!w-[48px]