Spaces:
Sleeping
Sleeping
File size: 2,863 Bytes
6a059ac | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | import { useState, useEffect } from 'react';
import { Key, X, CheckCircle } from 'lucide-react';
export function ApiKeyModal({ onClose }) {
const [key, setKey] = useState('');
const [saved, setSaved] = useState(false);
useEffect(() => {
const stored = localStorage.getItem('gemini_key');
if (stored) setKey(stored);
}, []);
const handleSave = () => {
localStorage.setItem('gemini_key', key.trim());
setSaved(true);
setTimeout(() => {
setSaved(false);
onClose();
}, 1500);
};
const handleClear = () => {
localStorage.removeItem('gemini_key');
setKey('');
};
return (
<div style={{
position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
background: 'rgba(6, 13, 26, 0.8)', backdropFilter: 'blur(8px)',
display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000
}}>
<div className="card fade-up" style={{ width: 400, padding: 24, position: 'relative' }}>
<button
onClick={onClose}
style={{ position: 'absolute', top: 16, right: 16, background: 'none', border: 'none', color: 'var(--text-tertiary)', cursor: 'pointer' }}
>
<X size={20} />
</button>
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
<div style={{ padding: 10, background: 'rgba(191, 90, 242, 0.1)', borderRadius: 8, color: 'var(--purple-ai)' }}>
<Key size={24} />
</div>
<div>
<h3 style={{ fontSize: 16, fontWeight: 700, margin: 0 }}>Provide Your Brain</h3>
<p style={{ fontSize: 12, color: 'var(--text-secondary)', margin: '4px 0 0' }}>Bring Your Own Key (BYOK) to bypass server limits.</p>
</div>
</div>
<p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginBottom: 20, lineHeight: 1.5 }}>
Our server's free-tier Gemini key might hit rate limits during high hackathon traffic. Paste your own Gemini 2.0 Flash API key here to guarantee lightning-fast performance. (Your key never leaves your browser).
</p>
<input
type="password"
value={key}
onChange={e => setKey(e.target.value)}
placeholder="AIzaSy..."
className="input-dark"
style={{ marginBottom: 16, padding: '12px' }}
/>
<div style={{ display: 'flex', gap: 10 }}>
<button
className="btn-primary"
style={{ flex: 1, background: saved ? 'var(--green-safe)' : 'var(--purple-ai)' }}
onClick={handleSave}
>
{saved ? <><CheckCircle size={16}/> Saved</> : 'Save API Key'}
</button>
{key && (
<button className="btn-ghost" onClick={handleClear}>Clear</button>
)}
</div>
</div>
</div>
);
}
|