bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
51 lines (50 loc) • 2.67 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { QRCode as ReactQRCode } from "react-qrcode-logo";
import { NUMERIC_SIZES } from "../../lib/layout-constants";
import { cn } from "../../lib/utils.js";
/**
* QRCodeRenderer Component
*
* Renders a QR code from a string. Uses the highly reliable react-qrcode-logo library
* with full Radix theme integration and customization options.
*
* @param {QRCodeRendererProps} props - The properties for the component.
* @returns {JSX.Element} The rendered QR code component.
*/
export function QRCodeRenderer({ data, size = NUMERIC_SIZES.QR_CODE_DEFAULT, level = "M", bgColor, fgColor, loading = false, logoImage, logoWidth, logoHeight, logoOpacity = 1, style, className, qrStyle = "squares", removeQrCodeBehindLogo = true, themeAware = true, }) {
// Theme-aware color defaults
const getThemeColor = (color, fallback) => {
if (color)
return color;
if (!themeAware)
return fallback;
// Use CSS variables for theme-aware colors
if (fallback === "transparent")
return "var(--background)";
if (fallback === "currentColor")
return "var(--foreground)";
return fallback;
};
const finalBgColor = getThemeColor(bgColor, "transparent");
const finalFgColor = getThemeColor(fgColor, "currentColor");
if (loading) {
return (_jsx("div", { className: cn("flex items-center justify-center border-2 border-dashed border-muted-foreground bg-muted rounded-lg", className), style: {
width: size,
height: size,
...style,
}, children: _jsx("p", { className: "text-xs text-muted-foreground text-center", children: "Generating QR code..." }) }));
}
if (!data) {
return (_jsx("div", { className: cn("flex items-center justify-center border-2 border-dashed border-destructive bg-destructive/10 rounded-lg", className), style: {
width: size,
height: size,
...style,
}, children: _jsx("p", { className: "text-xs text-destructive text-center", children: "No data provided for QR Code." }) }));
}
return (_jsx("div", { className: cn("flex items-center justify-center", className), style: {
width: size,
height: size,
...style,
}, children: _jsx(ReactQRCode, { value: data, size: size, qrStyle: qrStyle, ecLevel: level, bgColor: finalBgColor, fgColor: finalFgColor, logoImage: logoImage, logoWidth: logoWidth, logoHeight: logoHeight, logoOpacity: logoOpacity, removeQrCodeBehindLogo: removeQrCodeBehindLogo }) }));
}