Initial commit

components/public/qr-modal.tsx

@@ -0,0 +1,65 @@
+"use client";
+/* eslint-disable @next/next/no-img-element */
+
+import { useEffect, useState } from "react";
+import QRCode from "qrcode";
+import { Modal } from "@/components/ui/modal";
+
+type QrModalProps = {
+  title: string;
+  payload: string;
+};
+
+export function QrModal({ title, payload }: QrModalProps) {
+  const [open, setOpen] = useState(false);
+  const [qrDataUrl, setQrDataUrl] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    QRCode.toDataURL(payload, { margin: 1, width: 280 })
+      .then((dataUrl) => {
+        setQrDataUrl(dataUrl);
+        setError(null);
+      })
+      .catch(() => {
+        setQrDataUrl(null);
+        setError("Could not generate QR code");
+      });
+  }, [open, payload]);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={(event) => {
+          event.stopPropagation();
+          setOpen(true);
+        }}
+        aria-label="Show QR code"
+        className="method-action"
+      >
+        QR
+      </button>
+      <Modal open={open} onClose={() => setOpen(false)} title={title}>
+        <div className="space-y-3">
+          {qrDataUrl ? (
+            <img
+              src={qrDataUrl}
+              alt="QR code"
+              className="mx-auto h-56 w-56 rounded-md border border-border bg-white p-2 md:h-64 md:w-64"
+            />
+          ) : (
+            <div className="flex h-56 items-center justify-center rounded-md border border-border bg-bg/40 text-sm text-muted md:h-64">
+              {error ?? "Generating QR..."}
+            </div>
+          )}
+          <p className="max-h-28 overflow-y-auto break-all text-xs text-muted">{payload}</p>
+        </div>
+      </Modal>
+    </>
+  );
+}