feat: Add RibbonBar component with CAD function tabs

2026-06-22 05:54:22 +00:00
parent c3680a97f1
commit f0cb62c8b9
1 changed files with 42 additions and 0 deletions
@@ -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;