handle register and poster and fix bugs

components/doctor/Poster.js

@@ -1,15 +0,0 @@
-import Image from "next/image";
-import Logo from "@/public/assets/images/logo.png";
-
-function Poster() {
-  return (
-    <div className="bg-poster !pt-[32px] p-[24px]">
-      <div className="flex items-center justify-start gap-[5px]">
-        <Image src={Logo} width={30} height={30} alt="logo" />
-        <p className="text-[#E7EEF6] text-[16px] font-bold">nobat724.com</p>
-      </div>
-    </div>
-  );
-}
-
-export default Poster;

components/doctor/index.js

@@ -5,7 +5,7 @@ import AppointmentList from "./appointmentList";
 import DetailDoctor from "./detailDoctor";
 import Share from "./detailDoctor/Share";
 import CustomLoading from "@/app/component/loading/Custom";
-import Poster from "./Poster";
+import Poster from "./poster";
 
 function DoctorPage({ doctor }) {
   const [loading, setLoading] = useState(true);
@@ -31,7 +31,6 @@ function DoctorPage({ doctor }) {
           <Share />
         </div>
       </div>
-      <Poster />
       <div className="flex items-start justify-center gap-6 mt-[30px]">
         <DetailDoctor doctor={doctor} loading={loading} />
         <AppointmentList doctor={doctor} loading={loading} />

components/doctor/poster/Address.js

@@ -0,0 +1,17 @@
+import ClipBoard from "../../icons/ClipBoard";
+
+function Address({ data }) {
+  return (
+    <div className="flex flex-col items-start justify-start mt-[40px]">
+      <div className="flex items-center justify-start gap-[6px]">
+        <ClipBoard />
+        <p className="text-[#E7EEF6] text-[20px] font-semibold">آدرس:</p>
+      </div>
+      <p className="text-[#E7EEF6] text-[16px] !font-normal mt-[16px]">
+        {data.location}
+      </p>
+    </div>
+  );
+}
+
+export default Address;

components/doctor/poster/ImageProfile.js

@@ -0,0 +1,11 @@
+import Image from "next/image";
+
+function ImageProfile({ data }) {
+  return (
+    <div className="bg-stroke-circle ml-[10px] mt-[57px] p-[9px] rounded-full overflow-hidden">
+      <Image src={data.img} width={173} height={173} alt="profile-user" />
+    </div>
+  );
+}
+
+export default ImageProfile;

components/doctor/poster/QrCode.js

@@ -0,0 +1,15 @@
+import Image from "next/image";
+import CodeSample from "@/public/assets/images/default-qr-code.png";
+
+function QrCode() {
+  return (
+    <div className="flex items-center flex-col justify-center mt-[100%]">
+      <Image className="mt-[100%]" src={CodeSample} width={167} height={167} />
+      <p className="text-[#3987D4] font-semibold text-[16px] mt-[32px]">
+        nobat724/ahwaz.com
+      </p>
+    </div>
+  );
+}
+
+export default QrCode;

components/doctor/poster/Services.js

@@ -0,0 +1,23 @@
+import ClipBoard from "../../icons/ClipBoard";
+import CircleOrangeSm from "../../icons/CircleOrangeSm";
+
+function Services({ data }) {
+  return (
+    <div className="flex flex-col items-start justify-start mt-[40px]">
+      <div className="flex items-center justify-start gap-[6px]">
+        <ClipBoard />
+        <p className="text-[#E7EEF6] text-[20px] font-semibold">خدمات:</p>
+      </div>
+      <ul className="flex flex-col justify-start items-start gap-[16px] mt-[16px] font-normal ">
+        {data.specialties.map((item, idx) => (
+          <li key={idx} className="flex items-center justify-start gap-[4px]">
+            <CircleOrangeSm />
+            <p className="text-[16px] font-normal text-[#E7EEF6]">{item}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default Services;

components/doctor/poster/Telefon.js

@@ -0,0 +1,20 @@
+import TelefonPoster from "@/components/icons/TelefonPoster";
+
+function Telefon({ data }) {
+  return (
+    <div className="flex flex-col items-start justify-start mt-[40px]">
+      <div className="flex items-center justify-start gap-[6px]">
+        <TelefonPoster />
+        <p className="text-[#E7EEF6] text-[20px] font-semibold">تلفن:</p>
+      </div>
+      <p className="text-[#E7EEF6] text-[16px] font-normal mt-[16px]">
+        {data.phone}
+      </p>
+      <p className="text-[#E7EEF6] text-[16px] font-normal mt-[12px]">
+        {data.phone} - {data.phone}
+      </p>
+    </div>
+  );
+}
+
+export default Telefon;

components/doctor/poster/index.js

@@ -0,0 +1,35 @@
+import Image from "next/image";
+import Logo from "@/public/assets/images/logo.png";
+import Services from "./Services";
+import Address from "./Address";
+import Telefon from "./Telefon";
+import ImageProfile from "./ImageProfile";
+import QrCode from "./QrCode";
+
+function Poster({ data }) {
+  return (
+    <div className="bg-poster rounded-[16px] overflow-hidden !pt-[32px] p-[24px] relative flex justify-between items-start">
+      <div>
+        <div className="flex items-center justify-start gap-[5px]">
+          <Image src={Logo} width={30} height={30} alt="logo" />
+          <p className="text-[#E7EEF6] text-[16px] font-bold">nobat724.com</p>
+        </div>
+        <p className="mt-[40px] text-[#E7EEF6] text-[20px] font-bold">
+          {data.name}
+        </p>
+        <p className="text-[24px] mt-[20px] text-[#E7EEF6] font-bold">
+          تخصص: {data.expertise}
+        </p>
+        <Services data={data} />
+        <Address data={data} />
+        <Telefon data={data} />
+      </div>
+      <div className="flex flex-col justify-between items-end">
+        <ImageProfile data={data} />
+        <QrCode />
+      </div>
+    </div>
+  );
+}
+
+export default Poster;