Initial commit

qr-web/src/components/QrPreview.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import QRCodeStyling from 'qr-code-styling';
+import type { RecipeOptions } from '@/types/project';
+import { buildQrStylingOptions } from '@/lib/qrStylingOptions';
+
+interface QrPreviewProps {
+    data: string;
+    recipe: RecipeOptions;
+    logoUrl?: string | null;
+    size?: number;
+}
+
+export function QrPreview({ data, recipe, logoUrl, size = 256 }: QrPreviewProps) {
+    const ref = useRef<HTMLDivElement>(null);
+    const qrRef = useRef<QRCodeStyling | null>(null);
+
+    useEffect(() => {
+        if (!ref.current) return;
+        const qr = new QRCodeStyling(
+            buildQrStylingOptions(recipe, {
+                width: size,
+                height: size,
+                data: data || ' ',
+                image: logoUrl || undefined,
+            }) as ConstructorParameters<typeof QRCodeStyling>[0],
+        );
+        qrRef.current = qr;
+        qr.append(ref.current);
+        return () => {
+            ref.current?.replaceChildren();
+            qrRef.current = null;
+        };
+    }, [size]);
+
+    useEffect(() => {
+        const qr = qrRef.current;
+        if (!qr) return;
+        qr.update(
+            buildQrStylingOptions(recipe, {
+                width: recipe.width ?? size,
+                height: recipe.height ?? size,
+                data: data || ' ',
+                image: logoUrl || undefined,
+            }) as Parameters<QRCodeStyling['update']>[0],
+        );
+    }, [data, recipe, logoUrl, size]);
+
+    return <div ref={ref} style={{ display: 'inline-block' }} />;
+}