Update src/App.jsx

src/App.jsx

@@ -31,7 +31,7 @@ const QRGeneratorTab = ({
     // Effect to generate QR code on the main canvas (Generator Tab)
     useEffect(() => {
         drawQrCode(qrCanvasRef.current, content, qrColor, errorLevel);
-    }, [content, qrColor, errorLevel, drawQrCode, qrCanvasRef]); // Added qrCanvasRef to dependencies
+    }, [content, qrColor, errorLevel, drawQrCode, qrCanvasRef]);
 
     // Effect to generate QR codes for style previews (Style Selection Panel)
     useEffect(() => {
@@ -39,7 +39,7 @@ const QRGeneratorTab = ({
             const canvas = styleCanvasRefs.current[index];
             drawQrCode(canvas, "Sample", style.fg, 'H', 80);
         });
-    }, [qrStyles, drawQrCode, styleCanvasRefs]); // Added styleCanvasRefs to dependencies
+    }, [qrStyles, drawQrCode, styleCanvasRefs]);
 
     return (
         <div className="flex flex-col lg:flex-row p-4 md:p-6 space-y-6 lg:space-y-0 lg:space-x-6 h-full">
@@ -47,8 +47,15 @@ const QRGeneratorTab = ({
             <div className={`flex flex-col w-full lg:w-3/4 p-6 rounded-2xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} shadow-2xl ${currentThemeClasses.shadow} transform transition-all duration-500 ease-in-out`}>
                 <label className={`mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Enter Content:</label>
                 <textarea
-                    className={`w-full p-3 rounded-xl border ${currentThemeClasses.inputBorder} ${currentThemeClasses.inputBg} ${currentThemeClasses.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 font-inter
-                        ${isInputFocused ? 'ring-2 ring-blue-500 shadow-md shadow-blue-500/50' : ''}`}
+                    // CRITICAL FIX: Using string concatenation for className to avoid parser issues
+                    className={
+                        "w-full p-3 rounded-xl border " +
+                        currentThemeClasses.inputBorder + " " +
+                        currentThemeClasses.inputBg + " " +
+                        currentThemeClasses.text + " " +
+                        "focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 font-inter " +
+                        (isInputFocused ? 'ring-2 ring-blue-500 shadow-md shadow-blue-500/50' : '')
+                    }
                     rows="6"
                     placeholder="Enter text or URL..."
                     value={content}
@@ -335,7 +342,7 @@ const App = () => {
             cardBorder: 'border-green-900/15',
             qrPreviewBorder: 'border-green-500/50',
             qrPreviewBg: 'bg-gradient-to-br from-green-900/30 to-green-800/30 backdrop-blur-md',
-            headerGlow: 'animate-quantum-flux' 
+            headerGlow: 'animate-quantum-flux'
         },
         'ocean-blue': {
             bg: 'bg-gradient-to-br from-[#001A33] via-[#003366] to-[#002A5A] animate-gradient-shift',
@@ -357,7 +364,7 @@ const App = () => {
             cardBorder: 'border-blue-900/15',
             qrPreviewBorder: 'border-blue-600/50',
             qrPreviewBg: 'bg-gradient-to-br from-blue-950/30 to-blue-900/30 backdrop-blur-md',
-            headerGlow: 'animate-quantum-flux' 
+            headerGlow: 'animate-quantum-flux'
         },
         'warm-grey': {
             bg: 'bg-gradient-to-br from-[#202020] via-[#404040] to-[#303030] animate-gradient-shift',
@@ -379,7 +386,7 @@ const App = () => {
             cardBorder: 'border-gray-700/15',
             qrPreviewBorder: 'border-gray-500/50',
             qrPreviewBg: 'bg-gradient-to-br from-gray-800/30 to-gray-700/30 backdrop-blur-md',
-            headerGlow: 'animate-quantum-flux' 
+            headerGlow: 'animate-quantum-flux'
         },
         'deep-purple': {
             bg: 'bg-gradient-to-br from-[#100830] via-[#201040] to-[#180C38] animate-gradient-shift',
@@ -401,7 +408,7 @@ const App = () => {
             cardBorder: 'border-purple-900/15',
             qrPreviewBorder: 'border-purple-600/50',
             qrPreviewBg: 'bg-gradient-to-br from-purple-950/30 to-purple-900/30 backdrop-blur-md',
-            headerGlow: 'animate-quantum-flux' 
+            headerGlow: 'animate-quantum-flux'
         },
         'sunrise-orange': {
             bg: 'bg-gradient-to-br from-[#A0300A] via-[#D0501A] to-[#B84012] animate-gradient-shift',
@@ -423,7 +430,7 @@ const App = () => {
             cardBorder: 'border-orange-800/15',
             qrPreviewBorder: 'border-orange-600/50',
             qrPreviewBg: 'bg-gradient-to-br from-orange-900/30 to-orange-800/30 backdrop-blur-md',
-            headerGlow: 'animate-quantum-flux' 
+            headerGlow: 'animate-quantum-flux'
         },
     };
 
@@ -467,6 +474,155 @@ const App = () => {
         }
     }, []);
 
+    // Function to download the generated QR code (remains in App, passed to generator)
+    const downloadQrCode = () => {
+        if (content.trim() === '') {
+            showAlert('Please enter content to generate QR code.');
+            return;
+        }
+        const canvas = qrCanvasRef.current;
+        if (canvas) {
+            const pngUrl = canvas.toDataURL("image/png");
+            const downloadLink = document.createElement('a');
+            downloadLink.href = pngUrl;
+            downloadLink.download = 'qrcode.png';
+            document.body.appendChild(downloadLink);
+            downloadLink.click();
+            document.body.removeChild(downloadLink);
+        }
+    };
+
+    // Function to decode QR code from an uploaded image (remains in App, passed to decoder)
+    const decodeQrCode = (event) => {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const img = new Image();
+            img.onload = () => {
+                const canvas = document.createElement('canvas');
+                const context = canvas.getContext('2d');
+                canvas.width = img.width;
+                canvas.height = img.height;
+                context.drawImage(img, 0, 0, img.width, img.height);
+
+                const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+
+                if (jsQR) {
+                    let code = jsQR(imageData.data, imageData.width, imageData.height);
+
+                    if (!code) {
+                        for (let i = 0; i < imageData.data.length; i += 4) {
+                            imageData.data[i] = 255 - imageData.data[i];
+                            imageData.data[i + 1] = 255 - imageData.data[i + 1];
+                            imageData.data[i + 2] = 255 - imageData.data[i + 2];
+                        }
+                        code = jsQR(imageData.data, imageData.width, imageData.height);
+                    }
+
+                    if (code) {
+                        setDecodedContent(code.data);
+                        setSuggestedActions('');
+                        setShowSuggestedActions(false);
+                    } else {
+                        setDecodedContent('No QR code detected.');
+                        setSuggestedActions('');
+                        setShowSuggestedActions(false);
+                    }
+                } else {
+                    showAlert('QR decoder library (jsQR) not loaded. Please try again or check internet connection.');
+                    setSuggestedActions('');
+                    setShowSuggestedActions(false);
+                }
+            };
+            img.src = e.target.result;
+        };
+        reader.readAsDataURL(file);
+    };
+
+    // Function to summarize content using Gemini API (remains in App, passed to generator)
+    const summarizeContent = async () => {
+        if (!content.trim()) {
+            showAlert('Please enter content to summarize.');
+            return;
+        }
+
+        setIsSummarizing(true);
+        try {
+            let chatHistory = [];
+            const prompt = `Summarize the following text concisely: ${content}`;
+            chatHistory.push({ role: "user", parts: [{ text: prompt }] });
+            const payload = { contents: chatHistory };
+            const apiKey = ""; // Canvas will provide this at runtime
+            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
+
+            const response = await fetch(apiUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+
+            const result = await response.json();
+
+            if (result.candidates && result.candidates.length > 0 &&
+                result.candidates[0].content && result.candidates[0].content.parts &&
+                result.candidates[0].content.parts.length > 0) {
+                const text = result.candidates[0].content.parts[0].text;
+                setContent(text);
+            } else {
+                showAlert("Failed to summarize content. Please try again.");
+            }
+        } catch (error) {
+            console.error("Error summarizing content:", error);
+            showAlert("An error occurred while summarizing content.");
+        } finally {
+            setIsSummarizing(false);
+        }
+    };
+
+    // Function to suggest actions based on decoded content using Gemini API (remains in App, passed to decoder)
+    const suggestActions = async () => {
+        if (!decodedContent.trim() || decodedContent === 'No QR code detected.') {
+            showAlert('Please decode a QR code first to suggest actions.');
+            return;
+        }
+
+        setIsSuggestingActions(true);
+        setSuggestedActions('Thinking...');
+        setShowSuggestedActions(true);
+        try {
+            let chatHistory = [];
+            const prompt = `Given the following text from a QR code, suggest relevant actions a user might take. Format the suggestions as a bulleted list. Text: "${decodedContent}"`;
+            chatHistory.push({ role: "user", parts: [{ text: prompt }] });
+            const payload = { contents: chatHistory };
+            const apiKey = ""; // Canvas will provide this at runtime
+            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
+
+            const response = await fetch(apiUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+
+            const result = await response.json();
+
+            if (result.candidates && result.candidates.length > 0 &&
+                result.candidates[0].content && result.candidates[0].content.parts &&
+                result.candidates[0].content.parts.length > 0) {
+                const text = result.candidates[0].content.parts[0].text;
+                setSuggestedActions(text);
+            } else {
+                setSuggestedActions("Could not suggest actions. Please try again.");
+            }
+        } catch (error) {
+            console.error("Error suggesting actions:", error);
+            setSuggestedActions("An error occurred while suggesting actions.");
+        } finally {
+            setIsSuggestingActions(false);
+        }
+    };
+
     return (
         <div className={`min-h-screen font-inter antialiased ${currentThemeClasses.bg} ${currentThemeClasses.text} transition-all duration-500 ease-in-out`}>
             <div className="container mx-auto p-4 max-w-7xl">