feat: astro test

frontend/src/components/submit-form/qr-upload.tsx

@@ -0,0 +1,67 @@
+import { useCallback, useRef, useState } from "react";
+import { type FileWithPath } from "react-dropzone";
+import jsQR from "jsqr";
+import Dropzone from "../dropzone";
+
+interface Props {
+	setQrBytesRaw: React.Dispatch<React.SetStateAction<number[]>>;
+}
+
+export default function QrUpload({ setQrBytesRaw }: Props) {
+	const [hasImage, setHasImage] = useState(false);
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+
+	const handleDrop = useCallback(
+		(acceptedFiles: FileWithPath[]) => {
+			const file = acceptedFiles[0];
+
+			// Scan QR code
+			const reader = new FileReader();
+			reader.onload = async (event) => {
+				const image = new Image();
+				image.onload = () => {
+					const canvas = canvasRef.current;
+					if (!canvas) return;
+
+					const ctx = canvas.getContext("2d");
+					if (!ctx) return;
+
+					canvas.width = image.width;
+					canvas.height = image.height;
+					ctx.drawImage(image, 0, 0, image.width, image.height);
+
+					const imageData = ctx.getImageData(0, 0, image.width, image.height);
+					const code = jsQR(imageData.data, image.width, image.height);
+					if (!code) return;
+
+					setQrBytesRaw(code.binaryData!);
+					setHasImage(true);
+				};
+				image.src = event.target!.result as string;
+			};
+			reader.readAsDataURL(file);
+		},
+		[setQrBytesRaw],
+	);
+
+	return (
+		<div className="max-w-md w-full">
+			<Dropzone onDrop={handleDrop} options={{ maxFiles: 1 }}>
+				<p className="text-center text-sm">
+					{!hasImage ? (
+						<>
+							Drag and drop your QR code image here
+							<br />
+							or click to open
+						</>
+					) : (
+						"Uploaded!"
+					)}
+				</p>
+			</Dropzone>
+
+			{/* Canvas is used to scan the QR code */}
+			<canvas ref={canvasRef} className="hidden" />
+		</div>
+	);
+}