change design and data list in doctor-item & handle component appointment in doctor-item & handle functionality date-picker & fix bug appointment page & add req get appointment list

components/doctor/index.js

@@ -4,16 +4,19 @@ import Share from "./detailDoctor/Share";
 import CustomLoading from "@/app/component/loading/Custom";
 import Poster from "./poster";
 
-function DoctorPage({ doctor }) {
+function DoctorPage({ doctor, doctors }) {
   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">
-              متخصص {doctor?.expertise} {" >"}
+              {doctor?.expertise?.map(
+                (item, idx) =>
+                  `${item.name} ${doctor.expertise.length === idx + 1 ? ">" : "|"} `
+              )}
             </h2>
-            <p className="text-[#525252] text-nowrap mr-1">{doctor?.title}</p>
+            <p className="text-[#525252] text-nowrap mr-1">{doctor?.name}</p>
           </div>
         </CustomLoading>
         <div className="flex lg:hidden">
@@ -22,7 +25,7 @@ function DoctorPage({ doctor }) {
       </div>
       <div className="flex items-start justify-center gap-6 mt-[30px]">
         <DetailDoctor doctor={doctor} />
-        <AppointmentList doctor={doctor} />
+        <AppointmentList doctors={doctors} />
       </div>
     </div>
   );