feat: Add SidePanel component with tabs

This commit is contained in:
2026-06-22 05:54:35 +00:00
parent 37b6290f3e
commit dd4798c248
+59
View File
@@ -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;