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

app/doctor/[slug]/page.js

@@ -96,13 +96,19 @@ async function Doctor({ params }) {
       }
     : null;
 
+  const specialtyLabel = doctor?.specialties?.[0]?.name || "پزشکان";
   const breadcrumbJsonLd = doctor
     ? {
         "@context": "https://schema.org",
         "@type": "BreadcrumbList",
         itemListElement: [
           { "@type": "ListItem", position: 1, name: "خانه", item: "https://www.nobat724.com" },
-          { "@type": "ListItem", position: 2, name: "پزشکان", item: "https://www.nobat724.com/doctors" },
+          {
+            "@type": "ListItem",
+            position: 2,
+            name: specialtyLabel,
+            item: `https://www.nobat724.com/doctors?specialty=${encodeURIComponent(specialtyLabel)}`,
+          },
           { "@type": "ListItem", position: 3, name: `دکتر ${doctor.name}` },
         ],
       }

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">
+        <Link
-          بلاگ {">"}
+          href="/blogs"
-        </p>
+          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">
+            <h2 className="text-[#9B9B9B] text-nowrap flex items-center">
-              {doctor?.specialties?.map(
+              {doctor?.specialties?.map((item, idx) => (
-                (item, idx) =>
+                <span key={item.id ?? item.name} className="flex items-center">
-                  `${item.name} ${doctor.specialties.length === idx + 1 ? ">" : "|"} `
+                  <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>