'use client';
import { useEffect, useRef, useState } from 'react';
const qrInfo = {
width: 200,
height: 200,
margin: 0,
qrOptions: { typeNumber: '0', mode: 'Byte', errorCorrectionLevel: 'M' },
imageOptions: { hideBackgroundDots: true, imageSize: 1, margin: 2 },
dotsOptions: { type: 'rounded', color: '#049041', gradient: null },
backgroundOptions: { color: '#a39f9f', gradient: null },
image: null,
dotsOptionsHelper: {
colorType: { single: true, gradient: false },
gradient: {
linear: true,
radial: false,
color1: '#6a1a4c',
color2: '#6a1a4c',
rotation: '0'
}
},
cornersSquareOptions: {
type: 'extra-rounded',
color: '#000000',
gradient: null
},
cornersSquareOptionsHelper: {
colorType: { single: true, gradient: false },
gradient: {
linear: true,
radial: false,
color1: '#000000',
color2: '#000000',
rotation: '0'
}
},
cornersDotOptions: { type: 'dot', color: '#000000', gradient: null },
cornersDotOptionsHelper: {
colorType: { single: true, gradient: false },
gradient: {
linear: true,
radial: false,
color1: '#000000',
color2: '#000000',
rotation: '0'
}
},
backgroundOptionsHelper: {
colorType: { single: true, gradient: false },
gradient: {
linear: true,
radial: false,
color1: '#ffffff',
color2: '#ffffff',
rotation: '0'
}
}
};
const useQRCodeStyling = options => {
//Only do this on the client
if (typeof window !== 'undefined') {
const QRCodeStylingLib = require('qr-code-styling');
const qrCodeStyling = new QRCodeStylingLib(options);
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 qrCode = useQRCodeStyling(values);
const ref = useRef(null);
useEffect(() => {
qrCode?.append(ref.current);
}, [ref, qrCode]);
useEffect(() => {
qrCode?.update({ data: url });
}, [url, qrCode]);
const onUrlChange = event => {
event.preventDefault();
setUrl(event.target.value);
};
const onExtensionChange = event => {
setFileExt(event.target.value);
};
const onDownloadClick = () => {
qrCode?.download({ extension: fileExt });
};
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'>
<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>
);
}