peworkshop/components/QRScanner.js

'use client'; // Mark as a Client Component
import { useState } from 'react';
import QrReader from 'react-qr-reader';

export default function QRScanner({ onScan }) {
    const [result, setResult] = useState('');

    const handleScan = (data) => {
        if (data) {
            setResult(data);
            onScan(parseInt(data, 10));
        }
    };

    const handleError = (err) => {
        console.error(err);
    };

    return (
        <div>
            <QrReader
                delay={300}
                onError={handleError}
                onScan={handleScan}
                style={{ width: '100%' }}
            />
            <p>{result}</p>
        </div>
    );
}