feat: integrate html-to-image library for enhanced image generation and QR code rendering

components/doctor/poster/QrImg.js

@@ -1,32 +1,31 @@
-import { useState, useEffect } from "react";
+import { useRef, useEffect } from "react";
 import QRCode from "qrcode";
 import { getStateInfoClient } from "@/lib/getStateInfoClient";
 
 export default function QrImg({ onReady, size = 168 }) {
-  const [qrCodeData, setQrCodeData] = useState("");
+  const canvasRef = useRef(null);
 
   useEffect(() => {
     const { fullUrl } = getStateInfoClient();
 
-    if (fullUrl) {
-      QRCode.toDataURL(fullUrl, { margin: 1, width: size * 2 }).then((url) => {
-        setQrCodeData(url);
-        onReady?.();
-      });
+    if (fullUrl && canvasRef.current) {
+      QRCode.toCanvas(
+        canvasRef.current,
+        fullUrl,
+        { width: size, margin: 1, color: { dark: "#0B2A4A", light: "#ffffff" } },
+        () => onReady?.()
+      );
     } else {
       onReady?.();
     }
   }, [onReady, size]);
 
-  return qrCodeData ? (
-    <img
-      src={qrCodeData}
+  return (
+    <canvas
+      ref={canvasRef}
       width={size}
       height={size}
-      alt="کد QR پروفایل پزشک"
       style={{ width: size, height: size, display: "block" }}
     />
-  ) : (
-    <div style={{ width: size, height: size }} />
   );
 }