imported files from google gemini ai BUILD env

components/SupabaseConnector.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { initializeSupabase, testDatabaseConnection, disconnectSupabase } from '../services/supabaseClient';
+import { PlugIcon } from './icons/PlugIcon';
+import { LoadingSpinner } from './LoadingSpinner';
+
+interface SupabaseConnectorProps {
+    onSuccess: () => void;
+}
+
+export const SupabaseConnector: React.FC<SupabaseConnectorProps> = ({ onSuccess }) => {
+    const [url, setUrl] = useState('');
+    const [anonKey, setAnonKey] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleConnect = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsLoading(true);
+        setError(null);
+
+        const client = initializeSupabase(url, anonKey);
+        if (!client) {
+            setError("Failed to initialize client. Check credentials.");
+            setIsLoading(false);
+            return;
+        }
+
+        const { success, error: testError } = await testDatabaseConnection();
+
+        if (success) {
+            localStorage.setItem('supabaseUrl', url);
+            localStorage.setItem('supabaseAnonKey', anonKey);
+            onSuccess();
+        } else {
+            setError(testError || 'Connection failed. Please check your URL, Key, and RLS policies.');
+            disconnectSupabase(); // Clear the invalid client
+        }
+
+        setIsLoading(false);
+    };
+
+    return (
+        <div className="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+            <h3 className="text-lg font-bold text-gray-800 dark:text-white flex items-center mb-3">
+                <PlugIcon className="w-6 h-6 mr-2 text-brand-primary" />
+                Connect to Database
+            </h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                To save and view flyer history, connect to your Supabase project. This is optional.
+            </p>
+            <form onSubmit={handleConnect} className="space-y-4">
+                <div>
+                    <label htmlFor="supabase-url" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                        Supabase URL
+                    </label>
+                    <input
+                        type="url"
+                        id="supabase-url"
+                        value={url}
+                        onChange={(e) => setUrl(e.target.value)}
+                        required
+                        className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-brand-primary focus:border-brand-primary sm:text-sm"
+                        placeholder="https://your-project.supabase.co"
+                    />
+                </div>
+                <div>
+                    <label htmlFor="supabase-key" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                        Supabase Anon Key
+                    </label>
+                    <input
+                        type="text"
+                        id="supabase-key"
+                        value={anonKey}
+                        onChange={(e) => setAnonKey(e.target.value)}
+                        required
+                        className="mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-brand-primary focus:border-brand-primary sm:text-sm"
+                        placeholder="ey..."
+                    />
+                </div>
+                <button
+                    type="submit"
+                    disabled={isLoading}
+                    className="w-full bg-brand-secondary hover:bg-brand-dark disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-bold py-2 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center"
+                >
+                    {isLoading ? (
+                        <>
+                            <div className="w-5 h-5 mr-2"><LoadingSpinner /></div>
+                            Connecting...
+                        </>
+                    ) : (
+                        'Connect & Save'
+                    )}
+                </button>
+                {error && (
+                    <div className="mt-3 text-sm p-2 rounded bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-300">
+                        {error}
+                    </div>
+                )}
+            </form>
+        </div>
+    );
+};