change function redirect url in specialties page

components/home/search/index.js

@@ -13,6 +13,7 @@ function SearchBar() {
     second: "",
   });
   const [open, setOpen] = useState(false);
+  console.log(selected);
 
   return (
     <ButtonGroup

components/specialties/list/ItemSpecialties.js

@@ -1,29 +1,29 @@
 import TextLoading from "@/app/component/loading/Text";
-import React from "react";
+import Link from "next/link";
-import { useRouter } from "next/navigation";
 
 function ItemSpecialties({ data, loading }) {
-  const router = useRouter();
-  
-  const handleClick = () => {
-    router.push(`/doctors?specialties=${data.id}`);
-  };
-
   return (
-    <li
+    <li>
-      onClick={handleClick}
+      <Link
-      className="py-[17.5px] px-[12px] flex flex-col justify-center items-center gap-[16px] 
+        href={{
+          pathname: "/doctors",
+          query: {
+            specialties: data.id,
+          },
+        }}
+        className="py-[17.5px] px-[12px] flex flex-col justify-center items-center gap-[16px] 
       rounded-lg bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
       hover:bg-[#5559CE] transition-all duration-500 cursor-pointer hover-mode-item-speciality"
-    >
+      >
-      <TextLoading loading={loading} width={70} height={18}>
+        <TextLoading loading={loading} width={70} height={18}>
-        <p className="text-[#3B3B3B] text-[16px] font-bold">{data.name}</p>
+          <p className="text-[#3B3B3B] text-[16px] font-bold">{data.name}</p>
-      </TextLoading>
+        </TextLoading>
-      <TextLoading loading={loading} width={50} height={18}>
+        <TextLoading loading={loading} width={50} height={18}>
-        <p className="text-[#7E7E7E] text-[14px] font-medium">
+          <p className="text-[#7E7E7E] text-[14px] font-medium">
-          {data.number_of_doctors} پزشک
+            {data.number_of_doctors} پزشک
-        </p>
+          </p>
-      </TextLoading>
+        </TextLoading>
+      </Link>
     </li>
   );
 }