66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
"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>
|
|
</>
|
|
);
|
|
}
|