change design all page & component page booking and account & cleancode

2024-09-01 20:43:53 +03:30
parent 2afd79b84d
commit bb154ac63f
46 changed files with 685 additions and 523 deletions
@@ -0,0 +1,21 @@
+function Address({ doctor }) {
+    return (
+        <ul className='hidden mt-[4px] lg:flex flex-col'>
+            {doctor.address.map((item, idx) => (
+                <li
+                    key={idx}
+                >
+                    <div className='flex py-[12px] text-[#616161] text-[14px] items-start justify-start'>
+                        <p className='font-bold min-w-[115px]'>{`${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,24 @@
+import Image from 'next/image'
+
+function Head({ doctor }) {
+    return (
+        <div className="flex items-center justify-start gap-[12px]">
+            <Image
+                className='
+                    w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px]
+                    h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px]
+                '
+                src={doctor.img}
+                alt="profile"
+                height={56}
+                width={56}
+            />
+            <div className="flex flex-col items-start justify-start gap-[8px]">
+                <p className="text-[#3B3B3B] text-[12px] md:text-[14px] font-bold">{doctor.name}</p>
+                <p className="text-[#525252] text-[12px] md:text-[14px] font-medium">تخصص: {doctor.expertise}</p>
+            </div>
+        </div>
+    )
+}
+
+export default Head
@@ -0,0 +1,19 @@
+import Address from "./Address";
+import Head from "./Head";
+
+function Location({ doctor }) {
+    return (
+        <div className="h-fit lg:h-screen w-full lg:w-[39%]">
+            <div
+                className="p-0 lg:p-[16px] sticky rounded-[8px] bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg: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} />
+                <span className="block bg-[#EFEFEF] lg:bg-transparent w-full h-px lg:my-[6px] mt-[16px]"></span>
+                <Address doctor={doctor} />
+            </div>
+        </div>
+    )
+}
+
+export default Location