From 4fbb17b93e788b8a12521a9681944c19cd32cf8f Mon Sep 17 00:00:00 2001
From: Leopoldadmin <leopold.hammerschmidt@media-on.de>
Date: Mon, 22 Jun 2026 05:55:17 +0000
Subject: [PATCH] feat: Add StatusBar component with coordinates and status
 info

---
 frontend/src/components/StatusBar.tsx | 39 +++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 frontend/src/components/StatusBar.tsx

diff --git a/frontend/src/components/StatusBar.tsx b/frontend/src/components/StatusBar.tsx
new file mode 100644
index 0000000..a9d268c
--- /dev/null
+++ b/frontend/src/components/StatusBar.tsx
@@ -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;
\ No newline at end of file