From f0cb62c8b956bfff4f25712eedd93e8ebf065d81 Mon Sep 17 00:00:00 2001
From: Leopoldadmin <leopold.hammerschmidt@media-on.de>
Date: Mon, 22 Jun 2026 05:54:22 +0000
Subject: [PATCH] feat: Add RibbonBar component with CAD function tabs

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

diff --git a/frontend/src/components/RibbonBar.tsx b/frontend/src/components/RibbonBar.tsx
new file mode 100644
index 0000000..d423143
--- /dev/null
+++ b/frontend/src/components/RibbonBar.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import './RibbonBar.css';
+
+interface RibbonBarProps {
+  onTabChange: (tab: string) => void;
+}
+
+const RibbonBar: React.FC<RibbonBarProps> = ({ onTabChange }) => {
+  const [activeTab, setActiveTab] = useState('draw');
+
+  const tabs = [
+    { id: 'draw', label: 'Draw', icon: '✏️' },
+    { id: 'modify', label: 'Modify', icon: '🔧' },
+    { id: 'annotate', label: 'Annotate', icon: '📝' },
+    { id: 'view', label: 'View', icon: '👁️' },
+    { id: 'tools', label: 'Tools', icon: '🛠️' },
+  ];
+
+  const handleTabClick = (tabId: string) => {
+    setActiveTab(tabId);
+    onTabChange(tabId);
+  };
+
+  return (
+    <div className="ribbon-bar" role="menubar" aria-label="CAD Functions">
+      {tabs.map((tab) => (
+        <button
+          key={tab.id}
+          className={`ribbon-tab ${activeTab === tab.id ? 'active' : ''}`}
+          onClick={() => handleTabClick(tab.id)}
+          aria-pressed={activeTab === tab.id}
+          role="menuitemradio"
+        >
+          <span className="tab-icon" aria-hidden="true">{tab.icon}</span>
+          <span className="tab-label">{tab.label}</span>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default RibbonBar;
\ No newline at end of file