Spaces:
Running
Running
File size: 5,119 Bytes
518343a | 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 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | import { Activity, GitCompareArrows, LayoutGrid, Search } from 'lucide-react';
import { useEffect, useState } from 'react';
import { Link } from 'wouter';
interface HeaderProps {
lastUpdatedAt: number;
sseConnected?: boolean;
onSearchOpen?: () => void;
onAppSwitcherOpen?: () => void;
}
export function Header({
lastUpdatedAt,
sseConnected = false,
onSearchOpen,
onAppSwitcherOpen,
}: HeaderProps) {
const [time, setTime] = useState(new Date());
const [countdown, setCountdown] = useState(30);
useEffect(() => {
const timer = setInterval(() => {
setTime(new Date());
}, 1000);
return () => clearInterval(timer);
}, []);
useEffect(() => {
setCountdown(30);
if (sseConnected) return;
const interval = setInterval(() => {
setCountdown((prev) => (prev <= 1 ? 30 : prev - 1));
}, 1000);
return () => clearInterval(interval);
}, [lastUpdatedAt, sseConnected]);
return (
<header
className="flex items-center justify-between px-6 py-4 sticky top-0 z-50"
style={{
backgroundColor: 'var(--color-bg-primary)',
borderBottom: '1px solid var(--color-surface-border)',
}}
>
<div className="flex items-center gap-3">
<Activity className="w-5 h-5" style={{ color: 'var(--color-fg-muted)' }} />
<h1
className="text-sm font-bold tracking-[0.2em]"
style={{ color: 'var(--color-fg-primary)' }}
>
ECOSYSTEM COMMAND
</h1>
</div>
<div className="flex items-center gap-4">
{onAppSwitcherOpen && (
<button
onClick={onAppSwitcherOpen}
className="flex items-center gap-2 px-3 py-1.5 rounded-md text-xs transition-colors"
style={{
backgroundColor: 'var(--color-surface-base)',
border: '1px solid var(--color-surface-border)',
color: 'var(--color-fg-muted)',
}}
aria-label="Open app switcher"
title="Switch to any platform app (⌘J)"
>
<LayoutGrid className="w-3.5 h-3.5" />
<span className="hidden sm:inline">Apps</span>
<kbd
className="hidden sm:inline text-[10px] px-1 rounded"
style={{
backgroundColor: 'var(--color-bg-elevated)',
border: '1px solid var(--color-surface-border)',
color: 'var(--color-fg-muted)',
}}
>
⌘J
</kbd>
</button>
)}
{onSearchOpen && (
<button
onClick={onSearchOpen}
className="flex items-center gap-2 px-3 py-1.5 rounded-md text-xs transition-colors"
style={{
backgroundColor: 'var(--color-surface-base)',
border: '1px solid var(--color-surface-border)',
color: 'var(--color-fg-muted)',
}}
aria-label="Open search"
>
<Search className="w-3.5 h-3.5" />
<span className="hidden sm:inline">Search</span>
<kbd
className="hidden sm:inline text-[10px] px-1 rounded"
style={{
backgroundColor: 'var(--color-bg-elevated)',
border: '1px solid var(--color-surface-border)',
color: 'var(--color-fg-muted)',
}}
>
⌘K
</kbd>
</button>
)}
<Link
href="/operations/what-changed"
className="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-md text-xs transition-all hover:opacity-80"
style={{
backgroundColor: 'color-mix(in srgb, #8b7ac8 8%, var(--color-surface-base))',
border: '1px solid color-mix(in srgb, #8b7ac8 25%, var(--color-surface-border))',
color: '#a78bfa',
}}
title="See what changed since you last viewed"
>
<GitCompareArrows className="w-3.5 h-3.5" />
<span>What Changed</span>
</Link>
<div
className="flex items-center gap-6 text-xs font-mono"
style={{ color: 'var(--color-fg-muted)' }}
>
{sseConnected ? (
<div className="flex items-center gap-2">
<span
className="w-2 h-2 rounded-full"
style={{
backgroundColor: 'var(--color-low)',
boxShadow: '0 0 6px var(--color-low)',
}}
/>
<span style={{ color: 'var(--color-low)' }}>LIVE</span>
</div>
) : (
<div className="flex items-center gap-2">
<span
className="w-2 h-2 rounded-full animate-pulse"
style={{ backgroundColor: 'var(--color-aegis)' }}
/>
<span>Refreshing in: {countdown}s</span>
</div>
)}
<div className="hidden md:block">
{time.toISOString().replace('T', ' ').substring(0, 19)} UTC
</div>
</div>
</div>
</header>
);
}
|