Spaces:
Running
Running
File size: 3,219 Bytes
3d06096 | 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 | import React from 'react';
import { Lightbulb, X, Sparkles, Wand2 } from 'lucide-react';
interface SuggestionsModalProps {
isOpen: boolean;
onClose: () => void;
suggestions: string;
isLoading: boolean;
onImplement: () => void;
isImplementing: boolean;
}
const SuggestionsModal: React.FC<SuggestionsModalProps> = ({
isOpen,
onClose,
suggestions,
isLoading,
onImplement,
isImplementing
}) => {
if (!isOpen) return null;
return (
<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4">
<div className="bg-slate-900 w-full max-w-lg rounded-xl border border-slate-700 shadow-2xl flex flex-col overflow-hidden animate-in fade-in zoom-in duration-200">
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-gradient-to-r from-slate-900 to-slate-800">
<h2 className="text-lg font-bold text-white flex items-center gap-2">
<Lightbulb className="text-amber-400" size={20} />
AI Suggestions
</h2>
<button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
<X size={20} />
</button>
</div>
<div className="p-6 overflow-y-auto max-h-[60vh]">
{isLoading ? (
<div className="flex flex-col items-center justify-center space-y-4 py-8">
<Sparkles className="text-amber-400 animate-spin" size={32} />
<p className="text-slate-400 text-sm animate-pulse">Analyzing architecture...</p>
</div>
) : isImplementing ? (
<div className="flex flex-col items-center justify-center space-y-4 py-8">
<Wand2 className="text-purple-400 animate-pulse" size={32} />
<p className="text-slate-400 text-sm animate-pulse">Agents are applying fixes...</p>
</div>
) : (
<div className="text-slate-200 text-sm leading-relaxed whitespace-pre-wrap font-medium">
{suggestions || "No suggestions available."}
</div>
)}
</div>
<div className="p-4 border-t border-slate-800 bg-slate-900/50 flex justify-between items-center">
<div className="text-xs text-slate-500">
Review carefully before applying.
</div>
<div className="flex gap-3">
<button
onClick={onClose}
className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded text-sm transition-colors"
>
Close
</button>
{!isLoading && !isImplementing && suggestions && !suggestions.includes("Error") && (
<button
onClick={onImplement}
className="flex items-center gap-2 px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white rounded text-sm font-medium transition-colors shadow-lg shadow-purple-900/20"
>
<Wand2 size={16} />
Implement Fixes (Auto)
</button>
)}
</div>
</div>
</div>
</div>
);
};
export default SuggestionsModal; |