Spaces:
Running
Running
File size: 3,815 Bytes
5f07a23 |
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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
import { X } from 'lucide-react';
import { useState, useEffect } from 'react';
const ErrorModal = ({
showErrorModal,
closeErrorModal,
customApiKey,
setCustomApiKey,
handleApiKeySubmit
}) => {
const [localApiKey, setLocalApiKey] = useState(customApiKey);
// Update local API key when prop changes
useEffect(() => {
setLocalApiKey(customApiKey);
}, [customApiKey]);
const handleSubmit = (e) => {
e.preventDefault();
handleApiKeySubmit(localApiKey);
};
return (
<>
{showErrorModal && (
<div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 overflow-y-auto modalBackdrop"
onClick={(e) => {
if (e.target.classList.contains('modalBackdrop')) {
closeErrorModal();
}
}}
>
<div className="bg-white p-6 rounded-xl shadow-medium max-w-md w-full mx-4 my-8">
<div className="flex flex-col gap-4">
<div className="flex items-center justify-between">
<h2 className="text-xl font-medium text-gray-800">API Quota Exceeded</h2>
<button
type="button"
onClick={closeErrorModal}
className="text-gray-500 hover:text-gray-700"
aria-label="Close"
>
<X className="w-5 h-5" />
</button>
</div>
<div className="text-gray-600">
<p className="mb-2">
You've exceeded your API quota. You can:
</p>
<ul className="list-disc ml-5 mb-4 space-y-1 text-gray-600">
<li>Wait for your quota to reset</li>
<li>Use your own API key from <a href="https://ai.google.dev/" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">Google AI Studio</a></li>
</ul>
</div>
<form onSubmit={handleSubmit} className="space-y-3">
<div>
<label
htmlFor="apiKey"
className="block text-sm font-medium text-gray-700 mb-1"
>
Your Gemini API Key
</label>
<input
id="apiKey"
type="text"
placeholder="Enter your Gemini API key"
value={localApiKey}
onChange={(e) => setLocalApiKey(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
<p className="text-xs text-gray-500 mt-1">Your API key will be saved locally and never sent to our servers.</p>
</div>
<div className="flex justify-end gap-3 pt-2">
<button
type="button"
onClick={closeErrorModal}
className="px-4 py-2 border border-gray-200 text-gray-600 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-colors text-sm font-medium"
>
Cancel
</button>
<button
type="submit"
disabled={!localApiKey.trim()}
className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 transition-colors text-sm font-medium"
>
Save API Key
</button>
</div>
</form>
</div>
</div>
</div>
)}
</>
);
};
export default ErrorModal; |