basic style list doctors

components/doctors/ListDoctors.js

@@ -1,17 +0,0 @@
-import doctors from '@/data/doctors.json'
-
-function ListDoctors() {
-
-    console.log(doctors);
-    console.log('doctors');
-
-    return (
-        <div>
-            <ul className="grid">
-                {/* {doctors} */}
-            </ul>
-        </div>
-    )
-}
-
-export default ListDoctors

components/doctors/index.js

@@ -1,7 +1,7 @@
 import { Button } from "@mui/material";
 import LocationD from "../icons/LocationD";
 import SearchBar from "./search";
-import ListDoctors from "./ListDoctors";
+import ListDoctors from "./listDoctors";
 
 function DoctorsPage() {
     return (

components/doctors/listDoctors/ItemDoctor.js

@@ -0,0 +1,30 @@
+import LikeD from "@/components/icons/LikeD"
+import Image from "next/image"
+
+function ItemDoctor({ doctor }) {
+    return (
+        <li className="p-4 rounded-lg bg-[#FFF] border border-[#EFEFEF]">
+            <div className="flex items-center justify-start gap-2.5">
+                <Image
+                    width={72}
+                    height={72}
+                    src={doctor.img}
+                    alt="image-doctor"
+                    className="py-1.5"
+                />
+                <div className="flex flex-col items-start justify-center gap-2">
+                    <p className="text-[#3B3B3B] text-[14px] font-bold">{doctor.name}</p>
+                    <p className="text-[#616161] text-[14px] font-normal">تخصص: {doctor.expertise}</p>
+                    <div className="flex bg-[#F8F8FF] rounded-[4px] items-center justify-start gap-2">
+                        <div className="p-1 flex items-center gap-0.5">
+                            <LikeD />
+                            <p className="text-[#616161] text-[12px] font-normal">{doctor.satisfaction}%</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </li>
+    )
+}
+
+export default ItemDoctor

components/doctors/listDoctors/index.js

@@ -0,0 +1,23 @@
+import doctors from '@/data/doctors.json'
+import ItemDoctor from './ItemDoctor';
+
+function ListDoctors() {
+
+    console.log(doctors);
+    console.log('doctors');
+
+    return (
+        <div>
+            <ul className="grid mt-[64px] gap-[24px]">
+                {doctors.map(doctor => (
+                    <ItemDoctor
+                        key={doctor.id}
+                        doctor={doctor}
+                    />
+                ))}
+            </ul>
+        </div>
+    )
+}
+
+export default ListDoctors