Update src/App.jsx

src/App.jsx

@@ -1,16 +1,32 @@
-import React, { useState, useEffect, useRef } from 'react';
-// Import QRCode and jsQR directly as they should be installed via npm
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import QRCode from 'qrcode';
 import jsQR from 'jsqr';
 
+// Custom Alert Modal Component
+const CustomAlert = ({ message, onClose }) => {
+    if (!message) return null;
+
+    return (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+            <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-blue-500 rounded-lg shadow-xl p-6 max-w-sm w-full text-white text-center animate-fade-in-up">
+                <p className="text-lg font-semibold mb-4">{message}</p>
+                <button
+                    onClick={onClose}
+                    className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105"
+                >
+                    OK
+                </button>
+            </div>
+        </div>
+    );
+};
+
 // Main App component
 const App = () => {
-    // console.log("App component is loading!"); // You can keep or remove this line for final deployment
-
     const [activeTab, setActiveTab] = useState('generator');
     const [content, setContent] = useState('');
     const [errorLevel, setErrorLevel] = useState('L');
-    const [qrColor, setQrColor] = useState('#000000');
+    const [qrColor, setQrColor] = useState('#000000'); // Default QR color
     const [decodedContent, setDecodedContent] = useState('');
     const [selectedStyleIndex, setSelectedStyleIndex] = useState(0);
     const [currentTheme, setCurrentTheme] = useState('dark'); // Default theme
@@ -18,9 +34,11 @@ const App = () => {
     const [suggestedActions, setSuggestedActions] = useState(''); // State for suggested actions
     const [isSuggestingActions, setIsSuggestingActions] = useState(false); // Loading state for action suggestions
     const [showSuggestedActions, setShowSuggestedActions] = useState(false); // State to toggle suggestions visibility
+    const [alertMessage, setAlertMessage] = useState(null); // State for custom alert message
 
     const qrCanvasRef = useRef(null); // Ref for the main QR code canvas
-    const styleCanvasRefs = useRef([]); // Refs for the style preview canvases
+    // Use an array of refs for style preview canvases, initialized to null
+    const styleCanvasRefs = useRef(Array(12).fill(null)); 
 
     // Define QR code styles (mimicking the Python app's styles)
     const qrStyles = [
@@ -41,12 +59,10 @@ const App = () => {
     // Define themes for the web application with Web 3.0 GUI elements
     const themes = {
         dark: {
-            // Full-screen animated gradient background (deep charcoal to subtle dark violet)
             bg: 'bg-gradient-to-br from-[#0A0A0A] via-[#1A0A2A] to-[#0A0A0A] animate-gradient-shift',
             text: 'text-gray-100',
             primaryAccent: 'from-blue-500 to-purple-600',
             secondaryAccent: 'from-cyan-400 to-teal-500',
-            // Stronger glassmorphism with subtle inner shadow
             glassBg: 'bg-white/5 backdrop-blur-3xl',
             glassBorder: 'border-white/10',
             shadow: 'shadow-blue-500/20',
@@ -56,17 +72,16 @@ const App = () => {
             alert: 'text-pink-500',
             inputBg: 'bg-white/5',
             inputBorder: 'border-white/10',
-            // Tab active state with distinct background and glowing border
             tabActive: 'bg-white/10 border-blue-500 shadow-lg shadow-blue-500/20',
             tabInactive: 'bg-transparent border-transparent',
             cardBg: 'bg-white/5 backdrop-blur-md',
             cardBorder: 'border-white/10',
             qrPreviewBorder: 'border-blue-500/50',
             qrPreviewBg: 'bg-gradient-to-br from-gray-900/30 to-gray-800/30 backdrop-blur-md',
-            headerGlow: 'from-cyan-400 to-magenta-600 animate-neon-glow' // Updated header glow
+            // Enhanced rainbow glow for header
+            headerGlow: 'from-purple-500 via-pink-500 to-yellow-500 animate-rainbow-glow' 
         },
         light: {
-            // Platinum to ice white gradient
             bg: 'bg-gradient-to-br from-[#F8F8F8] via-[#E8E8E8] to-[#F8F8F8] animate-gradient-shift-light',
             text: 'text-gray-800',
             primaryAccent: 'from-blue-400 to-purple-500',
@@ -86,10 +101,9 @@ const App = () => {
             cardBorder: 'border-gray-200',
             qrPreviewBorder: 'border-blue-400/50',
             qrPreviewBg: 'bg-gradient-to-br from-gray-100/60 to-gray-200/60 backdrop-blur-md',
-            headerGlow: 'from-cyan-500 to-magenta-700 animate-neon-glow' // Updated header glow
+            headerGlow: 'from-blue-400 via-green-400 to-yellow-400 animate-rainbow-glow-light' 
         },
         'forest-green': {
-            // Midnight green to neon teal
             bg: 'bg-gradient-to-br from-[#0A2A1A] via-[#1A4A3A] to-[#0A3A2A] animate-gradient-shift',
             text: 'text-white',
             primaryAccent: 'from-green-500 to-emerald-600',
@@ -109,10 +123,9 @@ 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: 'from-cyan-400 to-green-600 animate-neon-glow' // Updated header glow
+            headerGlow: 'from-lime-400 via-teal-400 to-emerald-400 animate-rainbow-glow' 
         },
         'ocean-blue': {
-            // Deep ocean to electric blue
             bg: 'bg-gradient-to-br from-[#001A33] via-[#003366] to-[#002A5A] animate-gradient-shift',
             text: 'text-white',
             primaryAccent: 'from-blue-600 to-indigo-700',
@@ -132,10 +145,9 @@ 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: 'from-cyan-400 to-blue-600 animate-neon-glow' // Updated header glow
+            headerGlow: 'from-sky-400 via-blue-400 to-indigo-400 animate-rainbow-glow' 
         },
         'warm-grey': {
-            // Dark concrete to warm charcoal
             bg: 'bg-gradient-to-br from-[#202020] via-[#404040] to-[#303030] animate-gradient-shift',
             text: 'text-gray-100',
             primaryAccent: 'from-gray-500 to-gray-700',
@@ -155,10 +167,9 @@ 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: 'from-cyan-300 to-blue-500 animate-neon-glow' // Updated header glow
+            headerGlow: 'from-yellow-400 via-gray-400 to-orange-400 animate-rainbow-glow' 
         },
         'deep-purple': {
-            // Deepest purple to dark magenta
             bg: 'bg-gradient-to-br from-[#100830] via-[#201040] to-[#180C38] animate-gradient-shift',
             text: 'text-white',
             primaryAccent: 'from-purple-600 to-fuchsia-700',
@@ -178,10 +189,9 @@ 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: 'from-cyan-400 to-purple-600 animate-neon-glow' // Updated header glow
+            headerGlow: 'from-fuchsia-400 via-purple-400 to-pink-400 animate-rainbow-glow' 
         },
         'sunrise-orange': {
-            // Deepest orange to fiery red
             bg: 'bg-gradient-to-br from-[#A0300A] via-[#D0501A] to-[#B84012] animate-gradient-shift',
             text: 'text-white',
             primaryAccent: 'from-orange-600 to-red-700',
@@ -201,58 +211,55 @@ 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: 'from-cyan-500 to-orange-700 animate-neon-glow' // Updated header glow
+            headerGlow: 'from-yellow-400 via-orange-400 to-red-400 animate-rainbow-glow' 
         },
     };
 
     const currentThemeClasses = themes[currentTheme];
 
-    // Effect to generate QR code on the main canvas
-    useEffect(() => {
-        // Use the imported QRCode directly, not window.QRCode
-        if (qrCanvasRef.current && QRCode && content.trim() !== '') {
-            QRCode.toCanvas(qrCanvasRef.current, content, {
-                errorCorrectionLevel: errorLevel,
-                color: {
-                    dark: qrStyles[selectedStyleIndex].fg,
-                    light: '#FFFFFF'
-                }
-            }, function (error) {
-                if (error) console.error(error);
-            });
-        } else if (qrCanvasRef.current) {
-            // Clear canvas if content is empty
-            const context = qrCanvasRef.current.getContext('2d');
-            context.clearRect(0, 0, qrCanvasRef.current.width, qrCanvasRef.current.height);
+    // Function to show custom alert
+    const showAlert = (message) => {
+        setAlertMessage(message);
+    };
+
+    // Callback to generate QR code on a given canvas
+    // Using useCallback to memoize the function, preventing unnecessary re-creations
+    const drawQrCode = useCallback((canvas, text, color, errorLevel, size = 256) => {
+        if (!canvas || !QRCode || !text.trim()) {
+            const context = canvas.getContext('2d');
+            context.clearRect(0, 0, canvas.width, canvas.height); // Clear if no text or QR code library
+            return;
         }
-    }, [content, errorLevel, selectedStyleIndex, qrColor]);
+        QRCode.toCanvas(canvas, text, {
+            errorCorrectionLevel: errorLevel,
+            width: size,
+            color: {
+                dark: color, // Use the provided color directly
+                light: '#FFFFFF'
+            }
+        }, function (error) {
+            if (error) console.error("QR Code drawing error:", error);
+        });
+    }, []); // Dependencies are stable (QRCode)
 
-    // Effect to generate QR codes for style previews
+    // Effect to generate QR code on the main canvas (Generator Tab)
     useEffect(() => {
-        // Use the imported QRCode directly, not window.QRCode
-        if (QRCode) {
-            qrStyles.forEach((style, index) => {
-                const canvas = styleCanvasRefs.current[index];
-                if (canvas) {
-                    QRCode.toCanvas(canvas, "Sample", {
-                        errorCorrectionLevel: 'H',
-                        width: 80, // Fixed size for preview
-                        color: {
-                            dark: style.fg,
-                            light: '#FFFFFF'
-                        }
-                    }, function (error) {
-                        if (error) console.error(error);
-                    });
-                }
-            });
-        }
-    }, [QRCode]); // Dependency changed to QRCode
+        drawQrCode(qrCanvasRef.current, content, qrColor, errorLevel);
+    }, [content, qrColor, errorLevel, drawQrCode]); // Added qrColor to dependencies
+
+    // Effect to generate QR codes for style previews (Style Selection Panel)
+    useEffect(() => {
+        qrStyles.forEach((style, index) => {
+            const canvas = styleCanvasRefs.current[index];
+            // Draw a sample QR code for each style preview
+            drawQrCode(canvas, "Sample", style.fg, 'H', 80);
+        });
+    }, [qrStyles, drawQrCode]); // Re-run when qrStyles or drawQrCode changes
 
     // Function to download the generated QR code
     const downloadQrCode = () => {
         if (content.trim() === '') {
-            alert('Please enter content to generate QR code.');
+            showAlert('Please enter content to generate QR code.');
             return;
         }
         const canvas = qrCanvasRef.current;
@@ -284,7 +291,6 @@ const App = () => {
 
                 const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
 
-                // Use the imported jsQR directly, not window.jsQR
                 if (jsQR) {
                     let code = jsQR(imageData.data, imageData.width, imageData.height);
 
@@ -308,7 +314,7 @@ const App = () => {
                         setShowSuggestedActions(false);
                     }
                 } else {
-                    setDecodedContent('QR decoder library (jsQR) not loaded. Please try again or check internet connection.');
+                    showAlert('QR decoder library (jsQR) not loaded. Please try again or check internet connection.');
                     setSuggestedActions('');
                     setShowSuggestedActions(false);
                 }
@@ -321,7 +327,7 @@ const App = () => {
     // Function to summarize content using Gemini API
     const summarizeContent = async () => {
         if (!content.trim()) {
-            alert('Please enter content to summarize.');
+            showAlert('Please enter content to summarize.');
             return;
         }
 
@@ -348,11 +354,11 @@ const App = () => {
                 const text = result.candidates[0].content.parts[0].text;
                 setContent(text); // Update the input field with summarized content
             } else {
-                alert("Failed to summarize content. Please try again.");
+                showAlert("Failed to summarize content. Please try again.");
             }
         } catch (error) {
             console.error("Error summarizing content:", error);
-            alert("An error occurred while summarizing content.");
+            showAlert("An error occurred while summarizing content.");
         } finally {
             setIsSummarizing(false);
         }
@@ -361,7 +367,7 @@ const App = () => {
     // Function to suggest actions based on decoded content using Gemini API
     const suggestActions = async () => {
         if (!decodedContent.trim() || decodedContent === 'No QR code detected.') {
-            alert('Please decode a QR code first to suggest actions.');
+            showAlert('Please decode a QR code first to suggest actions.');
             return;
         }
 
@@ -411,7 +417,7 @@ const App = () => {
                     rows="6"
                     placeholder="Enter text or URL..."
                     value={content}
-                    onChange={(e) => setContent(e.target.value)}
+                    onChange={(e) => setContent(e.target.value)} // This should handle continuous typing
                 ></textarea>
 
                 <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mt-4">
@@ -453,7 +459,7 @@ const App = () => {
                     type="color"
                     className={`w-full h-10 rounded-xl border ${currentThemeClasses.inputBorder} p-1 cursor-pointer transition-all duration-300`}
                     value={qrColor}
-                    onChange={(e) => setQrColor(e.target.value)}
+                    onChange={(e) => setQrColor(e.target.value)} // This updates qrColor state
                 />
 
                 <label className={`mt-6 mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>QR Preview:</label>
@@ -483,9 +489,11 @@ const App = () => {
                                     ${currentThemeClasses.inputBg}`}
                                 onClick={() => {
                                     setSelectedStyleIndex(index);
-                                    setQrColor(style.fg); // Update color picker with selected style's color
+                                    // When a style is selected, update qrColor to match the style's foreground color
+                                    setQrColor(style.fg); 
                                 }}
                             >
+                                {/* Use a ref for each canvas in the map */}
                                 <canvas ref={el => styleCanvasRefs.current[index] = el} width="80" height="80" className="rounded-lg"></canvas>
                                 <span className={`mt-2 text-sm font-medium ${currentThemeClasses.labelColor} font-inter`}>{style.name}</span>
                             </div>
@@ -623,6 +631,9 @@ const App = () => {
                     {activeTab === 'settings' && <SettingsTab />}
                 </div>
             </div>
+
+            {/* Custom Alert Modal */}
+            <CustomAlert message={alertMessage} onClose={() => setAlertMessage(null)} />
         </div>
     );
 };