feat: Add SidePanel component with tabs

2026-06-22 05:54:35 +00:00
parent 37b6290f3e
commit dd4798c248
1 changed files with 59 additions and 0 deletions
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import './SidePanel.css';
+
+const SidePanel: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('blocks');
+
+  const tabs = [
+    { id: 'blocks', label: 'Blocks', icon: '🧱' },
+    { id: 'layers', label: 'Layers', icon: '📄' },
+    { id: 'properties', label: 'Properties', icon: '⚙️' },
+    { id: 'copilot', label: 'KI Copilot', icon: '🤖' },
+  ];
+
+  const renderContent = () => {
+    switch (activeTab) {
+      case 'blocks':
+        return <div className="panel-content">Blocks content goes here</div>;
+      case 'layers':
+        return <div className="panel-content">Layers content goes here</div>;
+      case 'properties':
+        return <div className="panel-content">Properties content goes here</div>;
+      case 'copilot':
+        return <div className="panel-content">KI Copilot content goes here</div>;
+      default:
+        return <div className="panel-content">Select a tab</div>;
+    }
+  };
+
+  return (
+    <div className="side-panel" role="complementary" aria-label="Properties Panel">
+      <div className="panel-tabs" role="tablist" aria-label="Panel Tabs">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            className={`panel-tab ${activeTab === tab.id ? 'active' : ''}`}
+            onClick={() => setActiveTab(tab.id)}
+            role="tab"
+            aria-selected={activeTab === tab.id}
+            aria-controls={`panel-${tab.id}`}
+            id={`tab-${tab.id}`}
+          >
+            <span className="tab-icon" aria-hidden="true">{tab.icon}</span>
+            <span className="tab-label">{tab.label}</span>
+          </button>
+        ))}
+      </div>
+      <div 
+        className="panel-content-container"
+        role="tabpanel"
+        id={`panel-${activeTab}`}
+        aria-labelledby={`tab-${activeTab}`}
+      >
+        {renderContent()}
+      </div>
+    </div>
+  );
+};
+
+export default SidePanel;