feat(doctor): enhance doctor page with specialty links and dynamic breadcrumb

components/blog/head/index.js

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { convertTimestampToJalali } from "@/helper";
 
 function Head({ data }) {
@@ -7,9 +8,15 @@ function Head({ data }) {
   return (
     <div>
       <div className="flex items-center justify-start gap-1">
-        <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
-          بلاگ {">"}
-        </p>
+        <Link
+          href="/blogs"
+          className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal hover:text-[#525252]"
+        >
+          بلاگ
+        </Link>
+        <span className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
+          {">"}
+        </span>
         {firstTag && (
           <>
             <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">

components/doctor/index.js

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import AppointmentList from "./appointmentList";
 import DetailDoctor from "./detailDoctor";
 import Share from "./detailDoctor/Share";
@@ -9,11 +10,20 @@ function DoctorPage({ doctor, comments, rateAggregate, slug }) {
       <div className="flex items-center justify-between">
         <CustomLoading width={180} height={25}>
           <div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
-            <h2 className="text-[#9B9B9B] text-nowrap">
-              {doctor?.specialties?.map(
-                (item, idx) =>
-                  `${item.name} ${doctor.specialties.length === idx + 1 ? ">" : "|"} `
-              )}
+            <h2 className="text-[#9B9B9B] text-nowrap flex items-center">
+              {doctor?.specialties?.map((item, idx) => (
+                <span key={item.id ?? item.name} className="flex items-center">
+                  <Link
+                    href={`/doctors?specialty=${encodeURIComponent(item.name)}`}
+                    className="hover:text-[#525252]"
+                  >
+                    {item.name}
+                  </Link>
+                  <span className="mx-1">
+                    {doctor.specialties.length === idx + 1 ? ">" : "|"}
+                  </span>
+                </span>
+              ))}
             </h2>
             <p className="text-[#525252] text-nowrap mr-1">{doctor?.name}</p>
           </div>