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

components/icons/LikeD.js

@@ -0,0 +1,10 @@
+function LikeD() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path d="M5.59375 12.3265V5.55315C5.59375 5.28649 5.67375 5.02649 5.82042 4.80649L7.64042 2.09982C7.92708 1.66649 8.64042 1.35982 9.24708 1.58649C9.90042 1.80649 10.3337 2.53982 10.1937 3.19315L9.84708 5.37315C9.82042 5.57315 9.87375 5.75315 9.98708 5.89315C10.1004 6.01982 10.2671 6.09982 10.4471 6.09982H13.1871C13.7137 6.09982 14.1671 6.31315 14.4337 6.68649C14.6871 7.04649 14.7337 7.51315 14.5671 7.98649L12.9271 12.9798C12.7204 13.8065 11.8204 14.4798 10.9271 14.4798H8.32708C7.88042 14.4798 7.25375 14.3265 6.96708 14.0398L6.11375 13.3798C5.78708 13.1332 5.59375 12.7398 5.59375 12.3265Z" fill="#05BA58" />
+            <path d="M3.47301 4.25333H2.78634C1.75301 4.25333 1.33301 4.65333 1.33301 5.64V12.3467C1.33301 13.3333 1.75301 13.7333 2.78634 13.7333H3.47301C4.50634 13.7333 4.92634 13.3333 4.92634 12.3467V5.64C4.92634 4.65333 4.50634 4.25333 3.47301 4.25333Z" fill="#05BA58" />
+        </svg>
+    )
+}
+
+export default LikeD