102 lines
5.1 KiB
TypeScript
102 lines
5.1 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate, useLocation } from 'react-router-dom';
|
|
import { Activity, Settings, Move, Camera, Layers, Cpu, Target } from 'lucide-react';
|
|
|
|
interface HeaderProps {
|
|
currentTime: Date;
|
|
onTabChange: (tab: 'recipe' | 'motion' | 'camera' | 'setting' | 'initialize' | null) => void;
|
|
activeTab: 'recipe' | 'motion' | 'camera' | 'setting' | 'initialize' | null;
|
|
|
|
}
|
|
|
|
export const Header: React.FC<HeaderProps> = ({ currentTime, onTabChange, activeTab }) => {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const isWebView = typeof window !== 'undefined' && !!window.chrome?.webview;
|
|
const isIOPage = location.pathname === '/io-monitor';
|
|
|
|
return (
|
|
<header className="absolute top-0 left-0 right-0 h-20 px-6 flex items-center justify-between z-40 bg-gradient-to-b from-black/80 to-transparent pointer-events-none">
|
|
<div
|
|
className="flex items-center gap-4 pointer-events-auto cursor-pointer group"
|
|
onClick={() => {
|
|
navigate('/');
|
|
onTabChange(null);
|
|
}}
|
|
>
|
|
<div className="w-12 h-12 border-2 border-neon-blue flex items-center justify-center rounded shadow-glow-blue bg-black/50 backdrop-blur group-hover:bg-neon-blue/10 transition-colors">
|
|
<Cpu className="text-neon-blue w-8 h-8 animate-pulse-slow" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-3xl font-tech font-bold text-white tracking-widest uppercase italic text-shadow-glow-blue group-hover:text-neon-blue transition-colors">
|
|
EQUI-HANDLER <span className="text-neon-blue text-sm not-italic">PRO</span>
|
|
</h1>
|
|
<div className="flex gap-2 text-[10px] text-neon-blue/70 font-mono">
|
|
<span>SYS.VER 4.2.0</span>
|
|
<span>|</span>
|
|
<span className={isWebView ? "text-neon-green" : "text-amber-500"}>
|
|
LINK: {isWebView ? "NATIVE" : "SIMULATION"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Top Navigation */}
|
|
<div className="flex items-center gap-2 pointer-events-auto">
|
|
{/* IO Tab Switcher (only on IO page) */}
|
|
|
|
|
|
<div className="bg-black/40 backdrop-blur-md p-1 rounded-full border border-white/10 flex gap-1">
|
|
{[
|
|
{ id: 'recipe', icon: Layers, label: 'RECIPE', path: '/' },
|
|
{ id: 'io', icon: Activity, label: 'I/O MONITOR', path: '/io-monitor' },
|
|
{ id: 'motion', icon: Move, label: 'MOTION', path: '/' },
|
|
{ id: 'camera', icon: Camera, label: 'VISION', path: '/' },
|
|
{ id: 'setting', icon: Settings, label: 'CONFIG', path: '/' },
|
|
{ id: 'initialize', icon: Target, label: 'INITIALIZE', path: '/' }
|
|
].map(item => {
|
|
const isActive = item.id === 'io'
|
|
? location.pathname === '/io-monitor'
|
|
: activeTab === item.id;
|
|
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => {
|
|
if (item.id === 'io') {
|
|
navigate('/io-monitor');
|
|
onTabChange(null);
|
|
} else {
|
|
if (location.pathname !== '/') {
|
|
navigate('/');
|
|
}
|
|
onTabChange(activeTab === item.id ? null : item.id as any);
|
|
}
|
|
}}
|
|
className={`
|
|
flex items-center gap-2 px-6 py-2 rounded-full font-tech font-bold text-sm transition-all border border-transparent
|
|
${isActive
|
|
? 'bg-neon-blue/10 text-neon-blue border-neon-blue shadow-glow-blue'
|
|
: 'text-slate-400 hover:text-white hover:bg-white/5'}
|
|
`}
|
|
>
|
|
<item.icon className="w-4 h-4" /> {item.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-right pointer-events-auto">
|
|
<div className="text-2xl font-mono font-bold text-white text-shadow-glow-blue">
|
|
{currentTime.toLocaleTimeString('en-GB')}
|
|
</div>
|
|
<div className="text-xs font-tech text-slate-400 tracking-[0.3em]">
|
|
{currentTime.toLocaleDateString().toUpperCase()}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|