feat: Refactor specialty display logic and enhance specialty filtering

- Introduced SpecialtyChips component to manage the display of doctor's specialties with a primary specialty and a count of additional specialties.
- Updated ItemDoctor component to utilize SpecialtyChips for better UI presentation.
- Enhanced PosterLight and Poster components to display primary specialties and a text line for sub-specialties.
- Implemented nextSpecialtyFilter function to improve specialty selection logic in the Content component.
- Updated search functionality to allow searching by both doctor name and specialty.
- Added new specialties to specialties.json for better coverage.
- Created sync-specialties script to synchronize specialties data with the backend during build.
- Added tests for new components and helper functions to ensure functionality and reliability.

app/component/ItemDoctor.js

@@ -5,6 +5,7 @@ import CustomLoading from "./loading/Custom";
 import TextLoading from "./loading/Text";
 import CircularLoading from "./loading/Circular";
 import DoctorAvatar from "./DoctorAvatar";
+import SpecialtyChips from "./SpecialtyChips";
 
 // Icons
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
@@ -44,13 +45,7 @@ function ItemDoctor({ doctor, loading, setDoctors, priority = false }) {
             </Link>
           </TextLoading>
           <TextLoading loading={loading} width={120} height={15}>
-            <p className="text-[#616161] text-[14px] font-normal">
-              تخصص:
-              {doctor?.specialties?.map(
-                (item, idx) =>
-                  `${item.name} ${doctor.specialties.length === idx + 1 ? "" : "|"} `
-              )}
-            </p>
+            <SpecialtyChips specialties={doctor?.specialties} />
           </TextLoading>
           <CustomLoading loading={loading} width={100} height={25}>
             <div className="flex rounded items-center justify-start gap-2">