34 lines
1.2 KiB
JavaScript
34 lines
1.2 KiB
JavaScript
// src/pages/agent-office/components/TopBar.jsx
|
|
import { getThemeNames } from '../canvas/themes.js';
|
|
|
|
export default function TopBar({ connected, theme, onThemeChange, zoom, onZoomChange }) {
|
|
const themes = getThemeNames();
|
|
|
|
return (
|
|
<div className="ao-topbar">
|
|
<div className="ao-topbar-left">
|
|
<span className="ao-topbar-title">Agent Office</span>
|
|
<span className={`ao-topbar-status ${connected ? 'connected' : 'disconnected'}`}>
|
|
● {connected ? 'Connected' : 'Disconnected'}
|
|
</span>
|
|
</div>
|
|
<div className="ao-topbar-right">
|
|
<select
|
|
className="ao-topbar-select"
|
|
value={theme}
|
|
onChange={(e) => onThemeChange(e.target.value)}
|
|
>
|
|
{themes.map(t => (
|
|
<option key={t.key} value={t.key}>{t.name}</option>
|
|
))}
|
|
</select>
|
|
<div className="ao-topbar-zoom">
|
|
<button onClick={() => onZoomChange(Math.max(1, zoom - 0.5))} disabled={zoom <= 1}>-</button>
|
|
<span>{zoom}x</span>
|
|
<button onClick={() => onZoomChange(Math.min(4, zoom + 0.5))} disabled={zoom >= 4}>+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|