Spaces:
Sleeping
Sleeping
File size: 4,846 Bytes
08c0cf7 | 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 | import React from 'react';
import { useApp } from '../context/AppContext';
const TopNavBar = () => {
const { sessionData, isConnected, sendCommand } = useApp();
const status = sessionData?.status || 'STANDBY';
const isRunning = sessionData?.active && status !== 'COMPLETED';
const isStandby = status === 'STANDBY' || status === 'READY';
return (
<header className="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-surface/60 backdrop-blur-xl border-b border-primary/10 shadow-[0_0_40px_rgba(0,212,255,0.04)]">
<div className="flex items-center gap-8">
<span className="text-2xl font-black tracking-tighter text-primary font-headline">NEXUS</span>
<div className="h-8 w-px bg-outline-variant/20 hidden md:block"></div>
<div className="hidden md:flex flex-col">
<span className="text-[10px] font-mono text-outline-variant tracking-widest uppercase">System Status</span>
<div className="text-sm font-mono text-tertiary">{status}</div>
</div>
</div>
<div className="flex items-center gap-6">
<div className="flex gap-2">
{/* START - clickable when standby */}
<button
onClick={() => sendCommand({ action: 'start' })}
disabled={isRunning}
className={`flex items-center gap-2 px-4 py-1.5 rounded-full border text-xs font-bold transition-all ${isRunning
? 'bg-surface-container text-slate-600 border-slate-700 cursor-not-allowed'
: 'bg-tertiary/10 border-tertiary/20 text-tertiary hover:bg-tertiary/20 active:scale-95'}`}
>
<span className="material-symbols-outlined text-sm">play_arrow</span> START
</button>
{/* PAUSE/RESUME - clickable when running */}
<button
onClick={() => sendCommand({ action: 'pause' })}
disabled={!isRunning}
className={`flex items-center gap-2 px-4 py-1.5 rounded-full border text-xs font-bold transition-all ${!isRunning
? 'bg-surface-container text-slate-600 border-slate-700 cursor-not-allowed'
: status === 'PAUSED'
? 'bg-secondary text-surface border-secondary active:scale-95'
: 'bg-secondary/10 border-secondary/20 text-secondary hover:bg-secondary/20 active:scale-95'}`}
>
<span className="material-symbols-outlined text-sm">{status === 'PAUSED' ? 'play_arrow' : 'pause'}</span>
{status === 'PAUSED' ? 'RESUME' : 'PAUSE'}
</button>
{/* FORCE END - clickable when running */}
<button
onClick={() => sendCommand({ action: 'force_end' })}
disabled={!isRunning}
className={`flex items-center gap-2 px-4 py-1.5 rounded-full border text-xs font-bold transition-all ${!isRunning
? 'bg-surface-container text-slate-600 border-slate-700 cursor-not-allowed'
: 'bg-[#f59e0b]/10 border-[#f59e0b]/20 text-[#f59e0b] hover:bg-[#f59e0b]/20 active:scale-95'}`}
>
<span className="material-symbols-outlined text-sm">stop_circle</span> FORCE END
</button>
{/* RESET - always clickable */}
<button
onClick={() => sendCommand({ action: 'reset' })}
className="flex items-center gap-2 px-4 py-1.5 rounded-full bg-error/10 border border-error/20 text-error text-xs font-bold hover:bg-error/20 transition-all active:scale-95"
>
<span className="material-symbols-outlined text-sm">restart_alt</span> RESET
</button>
</div>
<div className="flex items-center gap-2 ml-4">
<div className={`w-2 h-2 rounded-full animate-pulse shadow-[0_0_8px_#66fa8c] ${isConnected ? 'bg-tertiary' : 'bg-error'}`}></div>
<span className={`text-[10px] font-mono font-bold tracking-widest uppercase ${isConnected ? 'text-tertiary' : 'text-error'}`}>
{isConnected ? 'CONNECTED' : 'DISCONNECTED'}
</span>
</div>
</div>
</header>
);
};
export default TopNavBar;
|