feat: Add StatusBar component with coordinates and status info

2026-06-22 05:55:17 +00:00
parent af142699e1
commit 4fbb17b93e
1 changed files with 39 additions and 0 deletions
@@ -0,0 +1,39 @@
+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;