basic style doctor page

app/doctor/[slug]/page.js

@@ -0,0 +1,16 @@
+import DoctorPage from "@/components/doctor";
+import doctors from '@/data/doctors.json';
+import Layout from "@/components/layout";
+
+function Doctor({ params: { slug } }) {
+
+    const doctor = doctors.find(item => item.id === +slug);
+
+    return (
+        <Layout title='دکتر ها'>
+            <DoctorPage doctor={doctor} />
+        </Layout>
+    )
+}
+
+export default Doctor

app/doctors/page.js

@@ -1,7 +1,7 @@
 import DoctorsPage from '@/components/doctors';
 import Layout from '@/components/layout';
 
-function index() {
+function Doctors() {
   return (
     <Layout title='دکتر ها'>
       <DoctorsPage />
@@ -9,4 +9,4 @@ function index() {
   )
 }
 
-export default index
+export default Doctors

app/globals.css

@@ -118,7 +118,7 @@ body {
     font-family: iran-sans;
     padding: 0;
     margin: 0;
-    background: #F5F5F5;
+    background: #FAFAFA;
 }
 
 .font-kalame {

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
+            <Link href={`/doctor/${doctor.id}`}>
-                className={`!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit 
+                <Button
+                    className={`!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit 
                     ${doctor.free_turn ?
-                        '!bg-[#5559CE]' :
+                            '!bg-[#5559CE]' :
-                        '!bg-[#D7D7D7]'
+                            '!bg-[#D7D7D7]'
-                    }`}
+                        }`}
-                disabled={!doctor.free_turn}
+                    disabled={!doctor.free_turn}
-            >
+                >
-                <ArrowLeftD />
+                    <ArrowLeftD />
-            </Button>
+                </Button>
+            </Link>
         </li>
     )
 }