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

components/doctor/appointmentList/ItemAppointment.js

@@ -5,6 +5,7 @@ import GreenCalendarTurn from "@/components/icons/GreenCalendarTurn";
 import { Button } from "@mui/material";
 import Link from "next/link";
 import DoctorAvatar from "@/app/component/DoctorAvatar";
+import SpecialtyChips from "@/app/component/SpecialtyChips";
 import { bookingState } from "./bookingState";
 
 function ItemAppointment({ turn, loading, doctorSlug, booking }) {
@@ -26,13 +27,9 @@ function ItemAppointment({ turn, loading, doctorSlug, booking }) {
             <p className="text-[#3B3B3B] text-[14px] font-bold">{turn?.name}</p>
           </TextLoading>
           <TextLoading width={65} height={15} loading={loading}>
-            <p className="text-[#525252] text-[14px] font-medium">
-              تخصص:
-              {turn?.specialties?.map(
-                (item, idx) =>
-                  `${item.name} ${turn.specialties.length === idx + 1 ? "" : "|"} `
-              )}
-            </p>
+            {/* ستون نوبت‌دهی باریک است؛ همان الگوی کارت پزشک — تخصص اصلی و
+                شمارندهٔ بقیه — تا شش نام پشت‌سرهم ارتفاعش را چند برابر نکند. */}
+            <SpecialtyChips specialties={turn?.specialties} />
           </TextLoading>
         </div>
       </div>