ebbf2d6326
The drawCardToCanvas function had an old version of the card rendering logic that leaked outside the function body (lines 505-731 were orphaned code). This code referenced local variables (ctx, p, data, qrX, qrSize, PAD, etc.) that only existed inside the function, causing ReferenceError at module load time and crashing the entire app with a blank screen. Also added missing lucide-react imports (Printer, Loader2, Share2, Download, Check, Copy, Award, Zap, Info, Palette, Shield, ChevronUp, ChevronDown) that were used in the JSX but not imported, causing the secondary Printer is not defined ReferenceError. Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
34 lines
956 B
TypeScript
34 lines
956 B
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
|
|
interface QRCodeCanvasProps {
|
|
value: string;
|
|
size?: number;
|
|
level?: 'L' | 'M' | 'Q' | 'H';
|
|
className?: string;
|
|
}
|
|
|
|
export function QRCodeCanvas({ value, size = 256, level = 'M', className }: QRCodeCanvasProps) {
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!canvasRef.current || !value || value.length < 4) return;
|
|
const el = canvasRef.current;
|
|
|
|
// Lazy import to avoid crashing at module load in restricted environments
|
|
import('qrcode').then((mod) => {
|
|
try {
|
|
mod.default.toCanvas(el, value, {
|
|
width: size,
|
|
margin: 1,
|
|
errorCorrectionLevel: level,
|
|
});
|
|
} catch {
|
|
// silently skip
|
|
}
|
|
}).catch(() => {
|
|
// qrcode unavailable in this environment
|
|
});
|
|
}, [value, size, level]);
|
|
|
|
return <canvas ref={canvasRef} width={size} height={size} className={className} />;
|
|
}
|