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

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>