Agent Zero
56 lines
3.6 KiB
TypeScript
56 lines
3.6 KiB
TypeScript
import React from 'react';
|
|
import type { StatusBarProps } from '../types/ui.types';
|
|
|
|
const StatusBar: React.FC<StatusBarProps> = ({
|
|
snapEnabled, orthoEnabled, polarEnabled, gridEnabled,
|
|
cursorX, cursorY, activeLayer, activeTool, onlineCount,
|
|
onToggleSnap, onToggleOrtho, onTogglePolar, onToggleGrid, seatCount,
|
|
}) => {
|
|
return (
|
|
<footer className="statusbar" role="status">
|
|
<div className={`status-item${snapEnabled ? ' active' : ''}`} title="Snap-Modus (F3)" aria-pressed={snapEnabled} onClick={onToggleSnap}>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
|
|
<span>SNAP</span>
|
|
</div>
|
|
<div className={`status-item${orthoEnabled ? ' active' : ''}`} title="Ortho-Modus (F8)" aria-pressed={orthoEnabled} onClick={onToggleOrtho}>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l18 18M3 21l18-18"/></svg>
|
|
<span>ORTHO</span>
|
|
</div>
|
|
<div className={`status-item hide-mobile${polarEnabled ? ' active' : ''}`} title="Polar-Tracking" aria-pressed={polarEnabled} onClick={onTogglePolar}>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="16 12 12 8 8 12"/><line x1="12" y1="2" x2="12" y2="16"/></svg>
|
|
<span>POLAR</span>
|
|
</div>
|
|
<div className={`status-item${gridEnabled ? ' active' : ''}`} title="Grid anzeigen (F7)" aria-pressed={gridEnabled} onClick={onToggleGrid}>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
|
|
<span>GRID</span>
|
|
</div>
|
|
<div className="status-item" style={{ fontFamily: 'var(--font-mono)' }}>
|
|
<span>X: {cursorX.toFixed(3)} m</span>
|
|
</div>
|
|
<div className="status-item" style={{ fontFamily: 'var(--font-mono)' }}>
|
|
<span>Y: {cursorY.toFixed(3)} m</span>
|
|
</div>
|
|
<div className="status-item hide-mobile" title="Layer">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/></svg>
|
|
<span>{activeLayer}</span>
|
|
</div>
|
|
<div className="status-item hide-mobile" title="Werkzeug">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
|
|
<span>{activeTool}</span>
|
|
</div>
|
|
{seatCount !== undefined && seatCount > 0 && (
|
|
<div className="status-item hide-mobile" title="Stuhl-Anzahl" style={{ fontFamily: 'var(--font-mono)' }}>
|
|
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="3" width="12" height="18" rx="1"/><line x1="6" y1="7" x2="18" y2="7"/></svg>
|
|
<span>{seatCount} Stühle</span>
|
|
</div>
|
|
)}
|
|
<div className="status-item" title={`${onlineCount} anderer Nutzer online`}>
|
|
<span className="status-dot"></span>
|
|
<span>Online · {onlineCount} weiterer</span>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default StatusBar;
|