Spaces:
Sleeping
Sleeping
File size: 4,234 Bytes
f0b682f 3c665d2 d0e0cf7 f0b682f 3c665d2 f0b682f 3c665d2 9f7dd14 3c665d2 9f7dd14 3c665d2 17e7bd7 3c665d2 f0b682f 3c665d2 d0e0cf7 3c665d2 | 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 | import { Database, Sun, Moon, PanelLeftOpen, PanelRightOpen, Cpu, Play, PlugZap } from 'lucide-react'
import { useStore } from '../store/useStore'
interface HeaderProps {
onToggleLeft: () => void
onToggleRight: () => void
onDemo: () => void
onConnectDb: () => void
}
export function Header({ onToggleLeft, onToggleRight, onDemo, onConnectDb }: HeaderProps) {
const { theme, toggleTheme, dbSeeded, dbLabel } = useStore()
return (
<header
className="border-b px-3 sm:px-5 py-3 flex items-center justify-between shrink-0 backdrop-blur-sm sticky top-0 z-50 theme-border"
style={{ background: 'var(--bg-secondary)' }}
>
<div className="flex items-center gap-2 sm:gap-3">
{/* Mobile sidebar toggle */}
<button
onClick={onToggleLeft}
className="lg:hidden flex items-center gap-1 px-2 py-1.5 rounded-lg hover:bg-white/5 text-gray-400 hover:text-white transition-colors text-[10px]"
>
<PanelLeftOpen size={14} />
<span className="hidden sm:inline">Data</span>
</button>
{/* Logo */}
<div
className="w-7 h-7 rounded-lg flex items-center justify-center shadow-lg shrink-0"
style={{ background: '#1e3a5f', boxShadow: '0 4px 12px rgba(30,58,95,0.4)' }}
>
<Database size={13} className="text-white" />
</div>
{/* Title */}
<div>
<h1 className="text-sm font-bold text-white tracking-tight leading-none">
Self-Improving SQL Agent
</h1>
<p className="text-[10px] text-gray-600 hidden sm:block mt-0.5">
LinUCB · GEPA · OpenEnv
</p>
</div>
</div>
<div className="flex items-center gap-2 sm:gap-3">
{/* Connection status */}
{dbSeeded ? (
<div className="hidden sm:flex items-center gap-1.5 text-[10px] text-green-400 max-w-[140px] truncate">
<span className="w-1.5 h-1.5 rounded-full bg-green-400 inline-block shrink-0" />
<span className="truncate">{dbLabel}</span>
</div>
) : (
<div className="hidden sm:flex items-center gap-1.5 text-[10px] text-amber-400">
<span className="w-1.5 h-1.5 rounded-full bg-amber-400 inline-block animate-pulse" />
connecting...
</div>
)}
{/* RL indicator */}
<div className="hidden md:flex items-center gap-1.5 text-[10px] text-violet-400 border border-violet-500/20 rounded-full px-2 py-0.5">
<Cpu size={10} />
LinUCB Active
</div>
{/* Connect DB button */}
<button
onClick={onConnectDb}
className="hidden sm:flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-[11px] font-medium transition-all hover:bg-white/5 theme-border border"
style={{ color: 'var(--text-muted)' }}
title={`Active: ${dbLabel}`}
>
<PlugZap size={11} />
<span className="hidden md:inline">Connect DB</span>
</button>
{/* Demo button */}
<button
onClick={onDemo}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-semibold text-white transition-all active:scale-95"
style={{ background: 'linear-gradient(135deg,#7c3aed,#2563eb)', boxShadow: '0 4px 12px rgba(124,58,237,0.35)' }}
>
<Play size={10} fill="currentColor" />
<span>Demo</span>
</button>
{/* Theme toggle */}
<button
onClick={toggleTheme}
className="p-1.5 rounded-lg hover:bg-white/5 transition-colors theme-text-muted"
title={theme === 'dark' ? 'Switch to light' : 'Switch to dark'}
>
{theme === 'dark' ? <Sun size={14} /> : <Moon size={14} />}
</button>
{/* Mobile right sidebar toggle */}
<button
onClick={onToggleRight}
className="lg:hidden flex items-center gap-1 px-2 py-1.5 rounded-lg hover:bg-white/5 text-gray-400 hover:text-white transition-colors text-[10px]"
>
<span className="hidden sm:inline">GEPA</span>
<PanelRightOpen size={14} />
</button>
</div>
</header>
)
}
|