Untitled
unknown
plain_text
a year ago
2.7 kB
3
Indexable
Never
'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> ); }