feat: redesign doctor sharing poster layout and enhance download functionality with dynamic file naming

components/doctor/poster/QrImg.js

@@ -2,37 +2,31 @@ import { useState, useEffect } from "react";
 import QRCode from "qrcode";
 import { getStateInfoClient } from "@/lib/getStateInfoClient";
 
-export default function QrImg({ onReady }) {
-  const [host, setHost] = useState("");
+export default function QrImg({ onReady, size = 168 }) {
   const [qrCodeData, setQrCodeData] = useState("");
 
   useEffect(() => {
-    const info = getStateInfoClient();
-    const linkHost = info.host;
-    const linkURL = info.fullUrl;
+    const { fullUrl } = getStateInfoClient();
 
-    setHost(linkHost);
-
-    if (linkURL) {
-      QRCode.toDataURL(linkURL).then((url) => {
+    if (fullUrl) {
+      QRCode.toDataURL(fullUrl, { margin: 1, width: size * 2 }).then((url) => {
         setQrCodeData(url);
         onReady?.();
       });
     } else {
       onReady?.();
     }
-  }, [onReady]);
+  }, [onReady, size]);
 
-  return (
-    <div className="flex items-center flex-col justify-center mt-[100%]">
-      {qrCodeData ? (
-        <img src={qrCodeData} width={167} height={167} alt="کد QR پروفایل پزشک" />
-      ) : (
-        <p>در حال بارگذاری...</p>
-      )}
-      <p className="text-[#3987D4] min-h-[24px] font-semibold text-[16px] mt-[32px]">
-        {host || ""}
-      </p>
-    </div>
+  return qrCodeData ? (
+    <img
+      src={qrCodeData}
+      width={size}
+      height={size}
+      alt="کد QR پروفایل پزشک"
+      style={{ width: size, height: size, display: "block" }}
+    />
+  ) : (
+    <div style={{ width: size, height: size }} />
   );
 }