43 lines
905 B
TypeScript
43 lines
905 B
TypeScript
import QR from 'qrcode';
|
|
import type { HTMLAttributes } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export type QRCodeProps = HTMLAttributes<HTMLDivElement> & {
|
|
data: string;
|
|
foreground: string;
|
|
background: string;
|
|
robustness?: 'L' | 'M' | 'Q' | 'H';
|
|
};
|
|
|
|
export const QRCode = async ({
|
|
data,
|
|
foreground,
|
|
background,
|
|
robustness = 'M',
|
|
className,
|
|
...props
|
|
}: QRCodeProps) => {
|
|
const svg = await QR.toString(data, {
|
|
type: 'svg',
|
|
color: {
|
|
dark: foreground,
|
|
light: background,
|
|
},
|
|
width: 200,
|
|
errorCorrectionLevel: robustness,
|
|
});
|
|
|
|
if (!svg) {
|
|
throw new Error('Failed to generate QR code');
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn('size-full', '[&_svg]:size-full', className)}
|
|
// biome-ignore lint/security/noDangerouslySetInnerHtml: "Required for SVG"
|
|
dangerouslySetInnerHTML={{ __html: svg }}
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|