qrcode

1"use client"
2 
3import React, { useEffect, useRef } from "react"
4import QRCodeStyling from "qr-code-styling"
5 
6import { cn } from "@/lib/utils"
7 
8interface QRCodeProps {
9  value: string
10  size?: number
11  bgColor?: string // Can be a CSS variable (e.g. --color-background) or a color value
12  fgColor?: string // Can be a CSS variable (e.g. --color-foreground) or a color value
13  level?: "L" | "M" | "Q" | "H"
14  marginSize?: number
15  className?: string
16  enableNavigation?: boolean // Enable click navigation to the QR code URL
17  dotStyle?:
18    | "rounded"
19    | "dots"
20    | "classy"
21    | "classy-rounded"
22    | "square"
23    | "extra-rounded"
24  cornerSquareStyle?:
25    | "dot"
26    | "square"
27    | "extra-rounded"
28    | "rounded"
29    | "dots"
30    | "classy"
31    | "classy-rounded"
32  cornerDotStyle?:
33    | "dot"
34    | "square"
35    | "rounded"
36    | "dots"
37    | "classy"
38    | "classy-rounded"
39    | "extra-rounded"
40  logoImage?: string // URL or data URI for the logo image
41  logoSize?: number // Size of the logo as a percentage of the QR code size (0-1)
42  logoMargin?: number // Margin around the logo in pixels
43}
44 
45// Helper to resolve CSS variable or direct color
46function resolveColor(color?: string, fallback?: string) {
47  if (!color) return fallback
48  if (color.startsWith("--")) {
49    if (typeof window !== "undefined") {
50      const value = getComputedStyle(document.documentElement).getPropertyValue(
51        color
52      )
53      if (value) return value.trim()
54    }
55    return fallback
56  }
57  return color
58}
59 
60export default function QRCode({
61  value,
62  size = 200,
63  // Use shadcn theme variables for best contrast by default
64  bgColor = "--color-background", // background
65  fgColor = "--color-foreground", // foreground (text/qr dots)
66  level = "M",
67  marginSize = 0,
68  className,
69  enableNavigation = false,
70  dotStyle = "square",
71  cornerSquareStyle = "square",
72  cornerDotStyle = "square",
73  logoImage,
74  logoSize = 0.2,
75  logoMargin = 0,
76}: QRCodeProps) {
77  const ref = useRef<HTMLDivElement>(null)
78  const qrCodeRef = useRef<QRCodeStyling | null>(null)
79 
80  useEffect(() => {
81    if (!value || !ref.current) return
82 
83    // Always resolve to actual color values
84    const resolvedBgColor = resolveColor(bgColor, "hsl(0, 0%, 100%)") // fallback: white
85    const resolvedFgColor = resolveColor(fgColor, "hsl(222.2, 84%, 4.9%)") // fallback: dark
86 
87    const qrCode = new QRCodeStyling({
88      width: size,
89      height: size,
90      type: "svg",
91      data: value,
92      margin: marginSize,
93// … truncated