feat: Enhance specialty handling and navigation across doctor and specialty pages

components/doctor/index.js

@@ -6,6 +6,7 @@ import Share from "./detailDoctor/Share";
 import CustomLoading from "@/app/component/loading/Custom";
 import Faq from "@/components/specialties/detail/Faq";
 import specialtiesData from "@/data/specialties.json";
+import { splitSpecialties } from "@/lib/specialtyDisplay";
 import { doctorTitle } from "@/helper";
 
 // مقصد تمیز صفحهٔ فرود تخصص؛ اگر تخصص slug نداشت، لیست پزشکان با کوئری قدیمی.
@@ -15,23 +16,27 @@ const specialtyHref = (name) => {
 };
 
 function DoctorPage({ doctor, comments, rateAggregate, addresses, bookableAddressUuids = [], bookingLocations = [], slug, faq = [] }) {
+  const { primary: primarySpecialty } = splitSpecialties(doctor?.specialties);
+
   return (
     <div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
       <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 flex items-center">
-              {doctor?.specialties?.map((item, idx) => (
-                <span key={item.id ?? item.name} className="flex items-center">
-                  <Link href={specialtyHref(item.name)} className="hover:text-[#525252]">
-                    {item.name}
-                  </Link>
-                  <span className="mx-1">
-                    {doctor.specialties.length === idx + 1 ? ">" : "|"}
-                  </span>
-                </span>
-              ))}
-            </h2>
+            {/* این خط یک breadcrumb است، نه فهرست تخصص. چاپ هر شش تخصص با
+                text-nowrap در موبایل از عرض صفحه بیرون می‌زد. فهرست کامل چند خط
+                پایین‌تر در Title.js می‌آید و آنجا می‌شکند. */}
+            {primarySpecialty && (
+              <h2 className="text-[#9B9B9B] text-nowrap flex items-center min-w-0">
+                <Link
+                  href={specialtyHref(primarySpecialty.name)}
+                  className="hover:text-[#525252] truncate"
+                >
+                  {primarySpecialty.name}
+                </Link>
+                <span className="mx-1">{">"}</span>
+              </h2>
+            )}
             <p className="text-[#525252] text-nowrap mr-1">{doctorTitle(doctor?.name)}</p>
           </div>
         </CustomLoading>