basic style doctor page

components/doctor/appointmentList/AppointmentList.js

@@ -0,0 +1,7 @@
+function AppointmentList() {
+    return (
+        <div className="w-[40%]">AppointmentList</div>
+    )
+}
+
+export default AppointmentList

components/doctor/detailDoctor/index.js

@@ -0,0 +1,7 @@
+function DetailDoctor() {
+    return (
+        <div className="w-[57%]">DetailDoctor</div>
+    )
+}
+
+export default DetailDoctor

components/doctor/index.js

@@ -0,0 +1,19 @@
+import AppointmentList from "./appointmentList/AppointmentList"
+import DetailDoctor from "./detailDoctor"
+
+function DoctorPage({ doctor }) {
+    return (
+        <div className="pt-[120px] mt-[56px] padding-responsive">
+            <div className="flex items-center justify-start text-[16px] font-normal">
+                <p className="text-[#9B9B9B]">متخصص {doctor.expertise} {' >'}</p>
+                <p className="text-[#525252] mr-1">{doctor.name}</p>
+            </div>
+            <div className="flex items-start justify-center gap-6 mt-[30px]">
+                <DetailDoctor />
+                <AppointmentList />
+            </div>
+        </div>
+    )
+}
+
+export default DoctorPage

components/doctors/listDoctors/ItemDoctor.js

@@ -6,6 +6,7 @@ import ArrowLeftD from "@/components/icons/ArrowLeftD"
 import ClockD from "@/components/icons/ClockD"
 import LikeD from "@/components/icons/LikeD"
 import PointD from "@/components/icons/PointD"
+import Link from "next/link"
 
 function ItemDoctor({ doctor }) {
     return (
@@ -52,16 +53,18 @@ function ItemDoctor({ doctor }) {
                 }</p>
 
             {/* Arrow */}
-            <Button
-                className={`!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit 
+            <Link href={`/doctor/${doctor.id}`}>
+                <Button
+                    className={`!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit 
                     ${doctor.free_turn ?
-                        '!bg-[#5559CE]' :
-                        '!bg-[#D7D7D7]'
-                    }`}
-                disabled={!doctor.free_turn}
-            >
-                <ArrowLeftD />
-            </Button>
+                            '!bg-[#5559CE]' :
+                            '!bg-[#D7D7D7]'
+                        }`}
+                    disabled={!doctor.free_turn}
+                >
+                    <ArrowLeftD />
+                </Button>
+            </Link>
         </li>
     )
 }