Untitled
plain_text
2 months ago
3.9 kB
1
Indexable
Never
'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> ); }