mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
43 lines
855 B
TypeScript
43 lines
855 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}
|
|
/>
|
|
);
|
|
};
|