refactor: pass doctorSlug prop to AppointmentList and ItemAppointment components

components/doctor/appointmentList/index.js

@@ -5,12 +5,12 @@ import ItemAppointment from "./ItemAppointment";
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
 import Link from "next/link";
 
-function AppointmentList({ doctor, loading }) {
+function AppointmentList({ doctor, loading, doctorSlug }) {
   return (
     <>
       <ul className="hidden sticky top-[122px] sm:top-[150px] mt:top-[178px] lg:top-[206px] lg:flex w-[38%] flex-col justify-start items-center gap-8">
         {doctor && (
-          <ItemAppointment loading={loading} turn={doctor} key={doctor.id} />
+          <ItemAppointment loading={loading} turn={doctor} key={doctor.id} doctorSlug={doctorSlug} />
         )}
       </ul>
       <div
@@ -20,7 +20,7 @@ function AppointmentList({ doctor, loading }) {
         <p className="text-[#05BA58] text-[11px] font-normal">
           {doctor && doctor?.free_turn}
         </p>
-        <Link href={`/appointment/${doctor && doctor?.id}`}>
+        <Link href={`/appointment/${doctorSlug}`}>
           <Button
             variant="contained"
             className="!py-2 !px-4 gap-1 !text-[14px] !font-medium"