|
|
@@ -0,0 +1,46 @@
|
|
|
+import React, { useState } from 'react';
|
|
|
+
|
|
|
+function AIPromptModal({ isOpen, onClose, onGenerate }) {
|
|
|
+ const [prompt, setPrompt] = useState('');
|
|
|
+
|
|
|
+ if (!isOpen) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleGenerate = () => {
|
|
|
+ onGenerate(prompt);
|
|
|
+ setPrompt('');
|
|
|
+ onClose();
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="fixed inset-0 z-50 overflow-hidden flex items-center justify-center">
|
|
|
+ <div className="absolute inset-0 bg-black/20 backdrop-blur-sm transition-opacity" onClick={onClose}></div>
|
|
|
+ <div className="relative theme-surface max-w-lg w-full rounded-lg shadow-2xl p-6 border theme-border">
|
|
|
+ <h2 className="text-lg font-bold theme-text mb-4">Add with AI...</h2>
|
|
|
+ <textarea
|
|
|
+ value={prompt}
|
|
|
+ onChange={(e) => setPrompt(e.target.value)}
|
|
|
+ placeholder="Enter your prompt here..."
|
|
|
+ className="w-full h-32 bg-transparent border theme-border rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-blue-500/20 outline-none transition-all theme-text"
|
|
|
+ />
|
|
|
+ <div className="flex justify-end mt-4">
|
|
|
+ <button
|
|
|
+ onClick={onClose}
|
|
|
+ className="text-sm font-medium theme-text-secondary hover:theme-text mr-4"
|
|
|
+ >
|
|
|
+ Cancel
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ onClick={handleGenerate}
|
|
|
+ className="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg font-medium text-sm transition-all shadow-sm hover:shadow active:scale-95 disabled:opacity-70 disabled:cursor-not-allowed"
|
|
|
+ >
|
|
|
+ Generate
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+export default AIPromptModal;
|
