design page booking & add page loginverify

2024-08-25 17:50:20 +03:30
parent 92e48cadd3
commit 31ed32fc21
22 changed files with 5760 additions and 69 deletions
@@ -0,0 +1,23 @@
+import React from 'react'
+
+function Address({ doctor }) {
+    return (
+        <ul className='mt-[4px] flex flex-col'>
+            {doctor.address.map((item, idx) => (
+                <li
+                    key={idx}
+                >
+                    <div className='flex py-[12px] text-[#616161] text-[14px] items-center justify-start'>
+                        <p className='font-bold'>{`${item.name}: `}</p>
+                        <p className='font-normal'>{item.location}</p>
+                    </div>
+                    {doctor.address.length > idx + 1 && (
+                        <span className='bg-[#EFEFEF] block h-px w-full'></span>
+                    )}
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default Address
@@ -0,0 +1,21 @@
+import Image from 'next/image'
+import React from 'react'
+
+function Head({ doctor }) {
+    return (
+        <div className="flex items-center justify-start gap-[12px]">
+            <Image
+                src={doctor.img}
+                alt="profile"
+                height={56}
+                width={56}
+            />
+            <div className="flex flex-col items-center justify-start gap-[8px]">
+                <p className="text-[#3B3B3B] text-[14px] font-bold">{doctor.name}</p>
+                <p className="text-[#525252] text-[14px] font-medium">تخصص: {doctor.expertise}</p>
+            </div>
+        </div>
+    )
+}
+
+export default Head
@@ -0,0 +1,18 @@
+import Address from "./Address";
+import Head from "./Head";
+
+function Detail({ doctor }) {
+    return (
+        <div className="h-screen w-[39%]">
+            <div
+                className="p-[16px] sticky rounded-[8px] bg-[#FFF] border border-solid border-[#EFEFEF]
+                top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]"
+            >
+                <Head doctor={doctor} />
+                <Address doctor={doctor} />
+            </div>
+        </div>
+    )
+}
+
+export default Detail