Spaces:
Build error
Build error
File size: 3,414 Bytes
198d614 | 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 | import { useState } from 'react';
import {
Cpu,
Terminal,
Settings,
Upload,
Package,
Database,
Zap,
Menu,
X
} from 'lucide-react';
import { useAWPStore } from '../store/awpStore';
export function Header({ onToggleTerminal, onToggleMonitor, showTerminal, showMonitor }) {
const [menuOpen, setMenuOpen] = useState(false);
const { isLoading, loadingMessage } = useAWPStore();
return (
<header className="h-14 bg-industrial-800 border-b border-industrial-600 flex items-center justify-between px-4">
{/* Left: Logo & Title */}
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-gradient-to-br from-accent-cyan to-accent-purple rounded-lg flex items-center justify-center">
<Zap className="w-5 h-5 text-white" />
</div>
<div>
<h1 className="text-sm font-semibold text-white tracking-wide">
AWP PLATFORM
</h1>
<p className="text-xs text-industrial-300">Digital Execution Hub</p>
</div>
</div>
{/* Built with anycoder badge */}
<a
href="https://huggingface.co/spaces/akhaliq/anycoder"
target="_blank"
rel="noopener noreferrer"
className="ml-4 px-2 py-1 bg-industrial-700 hover:bg-industrial-600 rounded text-xs text-accent-cyan transition-colors"
>
Built with anycoder
</a>
</div>
{/* Center: Loading Indicator */}
{isLoading && (
<div className="flex items-center gap-2 px-4 py-1 bg-industrial-700 rounded-full">
<div className="spinner w-4 h-4" />
<span className="text-xs text-industrial-200">{loadingMessage}</span>
</div>
)}
{/* Right: Controls */}
<div className="flex items-center gap-2">
<button
onClick={onToggleTerminal}
className={`p-2 rounded-lg transition-colors ${
showTerminal ? 'bg-accent-cyan/20 text-accent-cyan' : 'text-industrial-300 hover:text-white hover:bg-industrial-700'
}`}
title="Toggle Terminal"
>
<Terminal className="w-4 h-4" />
</button>
<button
onClick={onToggleMonitor}
className={`p-2 rounded-lg transition-colors ${
showMonitor ? 'bg-accent-orange/20 text-accent-orange' : 'text-industrial-300 hover:text-white hover:bg-industrial-700'
}`}
title="Resource Monitor"
>
<Cpu className="w-4 h-4" />
</button>
<button
className="p-2 rounded-lg text-industrial-300 hover:text-white hover:bg-industrial-700 transition-colors"
title="Database"
>
<Database className="w-4 h-4" />
</button>
<button
className="p-2 rounded-lg text-industrial-300 hover:text-white hover:bg-industrial-700 transition-colors"
title="Settings"
>
<Settings className="w-4 h-4" />
</button>
<div className="w-px h-6 bg-industrial-600 mx-2" />
<div className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-status-installed animate-pulse" />
<span className="text-xs text-industrial-300">System Online</span>
</div>
</div>
</header>
);
} |