Spaces:
Running
Running
File size: 3,639 Bytes
a5593b2 | 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 | import { useState } from 'react';
export default function SimulationPanel({ isRunning, onRun, onReset, sampleTasks }) {
const [task, setTask] = useState('');
const [selectedPreset, setSelectedPreset] = useState('');
const handleRun = () => {
const taskToRun = task.trim() || selectedPreset || sampleTasks[0];
onRun(taskToRun);
};
return (
<div className="glass-card p-5 space-y-4">
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-lg bg-indigo-500/10 flex items-center justify-center text-sm">▶️</div>
<h2 className="text-sm font-bold text-gray-200">Simulation Control</h2>
</div>
{/* Task Input */}
<div>
<label className="text-xs text-gray-500 mb-1.5 block">Task Description</label>
<textarea
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="Enter a software task..."
className="w-full bg-gray-800/50 border border-gray-700/50 rounded-lg px-3 py-2 text-sm text-gray-200 placeholder-gray-600 focus:outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/25 resize-none h-20"
disabled={isRunning}
/>
</div>
{/* Preset Tasks */}
<div>
<label className="text-xs text-gray-500 mb-1.5 block">Preset Tasks</label>
<div className="space-y-1.5">
{sampleTasks.map((t, i) => (
<button
key={i}
onClick={() => { setSelectedPreset(t); setTask(''); }}
disabled={isRunning}
className={`w-full text-left text-xs px-3 py-2 rounded-lg transition-all ${
selectedPreset === t
? 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300'
: 'bg-gray-800/30 border border-gray-800/50 text-gray-400 hover:bg-gray-800/50 hover:text-gray-300'
}`}
>
{t}
</button>
))}
</div>
</div>
{/* Action Buttons */}
<div className="flex gap-2">
<button
onClick={handleRun}
disabled={isRunning}
className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-all ${
isRunning
? 'bg-gray-800 text-gray-500 cursor-not-allowed'
: 'bg-indigo-600 text-white hover:bg-indigo-500 shadow-lg shadow-indigo-500/25'
}`}
>
{isRunning ? (
<span className="flex items-center justify-center gap-2">
<span className="w-3 h-3 border-2 border-gray-500 border-t-transparent rounded-full animate-spin" />
Running...
</span>
) : (
'▶ Run Simulation'
)}
</button>
<button
onClick={onReset}
className="px-4 py-2.5 rounded-lg text-sm font-medium bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-300 transition-all"
>
↺
</button>
</div>
{isRunning && (
<div className="bg-indigo-500/5 border border-indigo-500/20 rounded-lg p-3">
<div className="flex items-center gap-2 mb-2">
<div className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" />
<span className="text-xs text-indigo-400 font-medium">Simulation in progress...</span>
</div>
<div className="w-full bg-gray-800 rounded-full h-1.5">
<div className="bg-gradient-to-r from-indigo-500 to-purple-500 h-1.5 rounded-full animate-pulse" style={{ width: '60%' }} />
</div>
</div>
)}
</div>
);
} |