handle download poster and qrcode, fix to show timestamp, add pagination to doctors page

components/doctor/poster/QrCode.js

@@ -1,15 +0,0 @@
-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/QrImg.js

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+import QRCode from "qrcode";
+import { getStateInfoClient } from "@/lib/getStateInfoClient";
+
+export default function QrImg() {
+  const [host, setHost] = useState("");
+  const [qrCodeData, setQrCodeData] = useState("");
+
+  useEffect(() => {
+    const info = getStateInfoClient();
+    const linkHost = info.host;
+    const linkURL = info.fullUrl;
+
+    setHost(linkHost);
+
+    if (linkURL) {
+      QRCode.toDataURL(linkURL).then(setQrCodeData);
+    }
+  }, []);
+
+  return (
+    <div className="flex items-center flex-col justify-center mt-[100%]">
+      {qrCodeData ? (
+        <img src={qrCodeData} width={167} height={167} />
+      ) : (
+        <p>در حال بارگذاری...</p>
+      )}
+      <p className="text-[#3987D4] min-h-[24px] font-semibold text-[16px] mt-[32px]">
+        {host || ""}
+      </p>
+    </div>
+  );
+}

components/doctor/poster/Services.js

@@ -9,7 +9,7 @@ function Services({ data }) {
         <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) => (
+        {data?.expertise?.map((item, idx) => (
           <li key={idx} className="flex items-center justify-start gap-[4px]">
             <CircleOrangeSm />
             <p className="text-[16px] font-normal text-[#E7EEF6]">{item.name}</p>

components/doctor/poster/index.js

@@ -4,7 +4,7 @@ import Services from "./Services";
 import Address from "./Address";
 import Telefon from "./Telefon";
 import ImageProfile from "./ImageProfile";
-import QrCode from "./QrCode";
+import QrImg from "./QrImg";
 
 function Poster({ data }) {
   return (
@@ -19,18 +19,18 @@ function Poster({ data }) {
         </p>
         <p className="text-[24px] mt-[20px] text-[#E7EEF6] font-bold text-right">
           تخصص:
-          {data?.expertise?.map(
+          {data?.specialties?.map(
             (item, idx) =>
-              `${item.name} ${data.expertise.length === idx + 1 ? "" : "|"} `
+              `${item.name} ${data.specialties.length === idx + 1 ? "" : "|"} `
           )}
         </p>
         <Services data={data} />
         <Address data={data} />
         <Telefon data={data} />
       </div>
-      <div className="flex flex-col justify-between items-end">
+      <div className="flex flex-col justify-between items-end min-w-[200px]">
         <ImageProfile data={data} />
-        <QrCode />
+        <QrImg />
       </div>
     </div>
   );