63 lines
2.8 KiB
JavaScript
63 lines
2.8 KiB
JavaScript
// TopBar — mirrors ui/src/components/layout/TopBar.tsx
|
|
function TopBar({ page, onNavigate, counts, onOpenCreate, user }) {
|
|
const navItem = (id, label) => (
|
|
<button
|
|
key={id}
|
|
onClick={() => onNavigate(id)}
|
|
style={{
|
|
padding: '6px 12px', borderRadius: 8, fontSize: 12, fontWeight: 500,
|
|
border: 'none', cursor: 'pointer', fontFamily: 'inherit',
|
|
background: page === id ? '#2563eb' : 'transparent',
|
|
color: page === id ? '#fff' : '#64748b',
|
|
transition: 'background .15s',
|
|
}}
|
|
>{label}</button>
|
|
);
|
|
|
|
return (
|
|
<div style={{
|
|
flexShrink: 0, background: '#fff', borderBottom: '1px solid #e2e8f0',
|
|
padding: '12px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap',
|
|
}}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
|
|
<img src="../../assets/logo.svg" width="22" height="22" alt="" />
|
|
<span style={{
|
|
fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, fontWeight: 700,
|
|
color: '#2563eb', textTransform: 'uppercase', letterSpacing: '.16em',
|
|
}}>Agent Orchestrator</span>
|
|
<span style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 10, color: '#94a3b8' }}>v1.14.0</span>
|
|
<div style={{ display: 'flex', gap: 4 }}>
|
|
{navItem('tasks', 'Tasks')}
|
|
{navItem('schedules', 'Schedules')}
|
|
{navItem('settings', 'Settings')}
|
|
{navItem('users', 'Users')}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
|
<div style={{ fontSize: 11, color: '#64748b', display: 'flex', gap: 6 }}>
|
|
<span><b style={{ color: '#334155' }}>{counts.total}</b> 件</span>
|
|
<span><b style={{ color: '#16a34a' }}>{counts.running}</b> 実行中</span>
|
|
<span><b style={{ color: '#d97706' }}>{counts.waiting}</b> 待機</span>
|
|
{counts.failed > 0 && <span><b style={{ color: '#dc2626' }}>{counts.failed}</b> 失敗</span>}
|
|
</div>
|
|
{user && (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
|
<div style={{
|
|
width: 24, height: 24, borderRadius: 9999, background: '#dbeafe', color: '#1d4ed8',
|
|
display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700,
|
|
}}>{user.name.charAt(0)}</div>
|
|
<span style={{ fontSize: 12, color: '#475569' }}>{user.name}</span>
|
|
</div>
|
|
)}
|
|
<button onClick={onOpenCreate} style={{
|
|
padding: '8px 16px', background: '#2563eb', color: '#fff', borderRadius: 12,
|
|
fontSize: 13, fontWeight: 700, border: 'none', cursor: 'pointer', fontFamily: 'inherit',
|
|
}}>新しい依頼</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
window.TopBar = TopBar;
|