bigblocks/dist-registry/components/ui-components-qrcoderenderer.json

Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React

{
  "name": "ui-components-qrcoderenderer",
  "type": "registry:component",
  "dependencies": [
    "react-qrcode-logo"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui-components/QRCodeRenderer.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { QRCode as ReactQRCode } from \"react-qrcode-logo\";\nimport { NUMERIC_SIZES } from \"../../lib/layout-constants\";\nimport { cn } from \"../../lib/utils.js\";\n\nexport interface QRCodeRendererProps {\n\t/** Data to encode in the QR code (e.g., URL, address) */\n\tdata: string;\n\t/** Size of the QR code in pixels */\n\tsize?: number;\n\t/** Error correction level */\n\tlevel?: \"L\" | \"M\" | \"Q\" | \"H\";\n\t/** Background color (uses Radix theme colors or hex) */\n\tbgColor?: string;\n\t/** Foreground color (uses Radix theme colors or hex) */\n\tfgColor?: string;\n\t/** Show a loading state */\n\tloading?: boolean;\n\t/** Custom logo image source */\n\tlogoImage?: string;\n\t/** Logo width */\n\tlogoWidth?: number;\n\t/** Logo height */\n\tlogoHeight?: number;\n\t/** Logo opacity */\n\tlogoOpacity?: number;\n\t/** Style for the container */\n\tstyle?: React.CSSProperties;\n\t/** Class name for the container */\n\tclassName?: string;\n\t/** QR code style - squares or dots */\n\tqrStyle?: \"squares\" | \"dots\";\n\t/** Remove quiet zone (padding around QR code) */\n\tremoveQrCodeBehindLogo?: boolean;\n\t/** Use theme-aware colors (auto-adapts to dark/light theme) */\n\tthemeAware?: boolean;\n}\n\n/**\n * QRCodeRenderer Component\n *\n * Renders a QR code from a string. Uses the highly reliable react-qrcode-logo library\n * with full Radix theme integration and customization options.\n *\n * @param {QRCodeRendererProps} props - The properties for the component.\n * @returns {JSX.Element} The rendered QR code component.\n */\nexport function QRCodeRenderer({\n\tdata,\n\tsize = NUMERIC_SIZES.QR_CODE_DEFAULT,\n\tlevel = \"M\",\n\tbgColor,\n\tfgColor,\n\tloading = false,\n\tlogoImage,\n\tlogoWidth,\n\tlogoHeight,\n\tlogoOpacity = 1,\n\tstyle,\n\tclassName,\n\tqrStyle = \"squares\",\n\tremoveQrCodeBehindLogo = true,\n\tthemeAware = true,\n}: QRCodeRendererProps) {\n\t// Theme-aware color defaults\n\tconst getThemeColor = (color: string | undefined, fallback: string) => {\n\t\tif (color) return color;\n\t\tif (!themeAware) return fallback;\n\n\t\t// Use CSS variables for theme-aware colors\n\t\tif (fallback === \"transparent\") return \"var(--background)\";\n\t\tif (fallback === \"currentColor\") return \"var(--foreground)\";\n\t\treturn fallback;\n\t};\n\n\tconst finalBgColor = getThemeColor(bgColor, \"transparent\");\n\tconst finalFgColor = getThemeColor(fgColor, \"currentColor\");\n\n\tif (loading) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex items-center justify-center border-2 border-dashed border-muted-foreground bg-muted rounded-lg\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: size,\n\t\t\t\t\theight: size,\n\t\t\t\t\t...style,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<p className=\"text-xs text-muted-foreground text-center\">\n\t\t\t\t\tGenerating QR code...\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (!data) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex items-center justify-center border-2 border-dashed border-destructive bg-destructive/10 rounded-lg\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: size,\n\t\t\t\t\theight: size,\n\t\t\t\t\t...style,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<p className=\"text-xs text-destructive text-center\">\n\t\t\t\t\tNo data provided for QR Code.\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"flex items-center justify-center\", className)}\n\t\t\tstyle={{\n\t\t\t\twidth: size,\n\t\t\t\theight: size,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t>\n\t\t\t<ReactQRCode\n\t\t\t\tvalue={data}\n\t\t\t\tsize={size}\n\t\t\t\tqrStyle={qrStyle}\n\t\t\t\tecLevel={level}\n\t\t\t\tbgColor={finalBgColor}\n\t\t\t\tfgColor={finalFgColor}\n\t\t\t\tlogoImage={logoImage}\n\t\t\t\tlogoWidth={logoWidth}\n\t\t\t\tlogoHeight={logoHeight}\n\t\t\t\tlogoOpacity={logoOpacity}\n\t\t\t\tremoveQrCodeBehindLogo={removeQrCodeBehindLogo}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n",
      "target": "<%- config.aliases.components %>/qrcoderenderer.tsx"
    }
  ]
}