39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import './StatusBar.css';
|
||
|
|
|
||
|
|
const StatusBar: React.FC = () => {
|
||
|
|
// Mock status data
|
||
|
|
const coordinates = { x: 10.5, y: 20.3 };
|
||
|
|
const snapEnabled = true;
|
||
|
|
const activeLayer = 'Layer 1';
|
||
|
|
const units = 'mm';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="status-bar" role="status" aria-label="Application Status">
|
||
|
|
<div className="status-section coordinates">
|
||
|
|
<span className="status-label">Coordinates:</span>
|
||
|
|
<span className="status-value">X: {coordinates.x}, Y: {coordinates.y}</span>
|
||
|
|
</div>
|
||
|
|
<div className="status-section snap">
|
||
|
|
<span className="status-label">Snap:</span>
|
||
|
|
<button
|
||
|
|
className={`toggle-button ${snapEnabled ? 'enabled' : 'disabled'}`}
|
||
|
|
aria-pressed={snapEnabled}
|
||
|
|
aria-label={snapEnabled ? 'Snap enabled. Click to disable' : 'Snap disabled. Click to enable'}
|
||
|
|
>
|
||
|
|
{snapEnabled ? 'ON' : 'OFF'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div className="status-section layer">
|
||
|
|
<span className="status-label">Layer:</span>
|
||
|
|
<span className="status-value">{activeLayer}</span>
|
||
|
|
</div>
|
||
|
|
<div className="status-section units">
|
||
|
|
<span className="status-label">Units:</span>
|
||
|
|
<span className="status-value">{units}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default StatusBar;
|