feat: Add SidePanel component with tabs
This commit is contained in:
@@ -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;
|
||||||
Reference in New Issue
Block a user