'use client';
import { useEffect, useRef, useState } from 'react';
const useQRCodeStyling = (options, frameImage) => {
//Only do this on the client
if (typeof window !== 'undefined') {
const QRCodeStylingLib = require('qr-code-styling');
const qrCodeStyling = new QRCodeStylingLib(options);
if (frameImage) {
qrCodeStyling.append(new Image(frameImage));
}
console.log(qrCodeStyling);
return qrCodeStyling;
}
return null;
};
export default function WebQrDesignPreview({ qr_id, values }) {
const [url, setUrl] = useState(`${process.env.NEXT_PUBLIC_FRONTEND_URL}/w/${qr_id}`);
const [fileExt, setFileExt] = useState('png');
const frameImage = '/public/frame.png';
const qrCode = useQRCodeStyling(values, frameImage);
const ref = useRef(null);
useEffect(() => {
qrCode?.append(ref.current);
}, [ref, qrCode]);
useEffect(() => {
qrCode?.update({ data: url });
}, [url, qrCode]);
const onExtensionChange = event => {
setFileExt(event.target.value);
};
const onDownloadClick = () => {
qrCode?.download({
extension: fileExt,
name: `qr_with_frame.${fileExt}`,
size: 300 // Set the desired size of the saved image
});
};
return (
<div className='right-10 m-3 hidden lg:fixed lg:block'>
<h1 className='text-medium text-lg font-medium'>Website</h1>
<div className='my-5 flex h-[300px] w-[300px] items-center justify-center rounded border-2 border-gray-300'>
{/* QR Code preview */}
<div ref={ref} />
</div>
<div className='mt-5 flex w-[300px] items-center justify-between'>
<select className='rounded border border-gray-300 px-4 py-1 font-medium' onChange={onExtensionChange} value={fileExt}>
<option value='png'>PNG</option>
<option value='jpeg'>JPEG</option>
<option value='webp'>WEBP</option>
</select>
<button className='btn btn-primary btn-sm rounded' onClick={onDownloadClick}>
Download
</button>
</div>
<div className='mt-3 rounded-md bg-gray-200 px-2 py-4'>
<h4 className='text-center text-xs'>
<span className='mr-2 text-orange-400'>! IMPORTANT:</span>
Don't forget to test your QR code
</h4>
</div>
</div>
);
}