basic style list doctors

2024-06-25 13:08:56 +03:30
parent f641472ade
commit b22b29b7b5
6 changed files with 64 additions and 18 deletions
@@ -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
@@ -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