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

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: "",
-    second: "",
+    province: "",
+    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
-            !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
-            "
+        !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]
+        !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]">
-        <div className="min-w-[20px] min-h-[20px]">
-          <Search />
-        </div>
-        <p>جستجو</p>
-      </Button>
+      <Link
+        href={{
+          pathname: "/doctors",
+          query: {
+            province: selected.province,
+            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]