82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
import { useState } from 'react';
|
|
import { DesignHeader } from './DesignHeader';
|
|
import type { DesignTab } from './DesignHeader';
|
|
import { DesignSidebar } from './DesignSidebar';
|
|
import type { MenuItemId } from './DesignSidebar';
|
|
|
|
import { ComponentsContent } from './ComponentsContent';
|
|
import { ColorPaletteContent } from './ColorPaletteContent';
|
|
import { TypographyContent } from './TypographyContent';
|
|
import { RadiusContent } from './RadiusContent';
|
|
import { LayoutContent } from './LayoutContent';
|
|
import FoundationsOverview from './FoundationsOverview';
|
|
import ComponentsOverview from './ComponentsOverview';
|
|
import { ButtonContent } from './ButtonContent';
|
|
import { TextFieldContent } from './TextFieldContent';
|
|
import { getTheme } from './designTheme';
|
|
import type { ThemeMode } from './designTheme';
|
|
|
|
const FIRST_ITEM: Record<DesignTab, MenuItemId> = {
|
|
foundations: 'overview',
|
|
components: 'overview',
|
|
};
|
|
|
|
export const DesignPage = () => {
|
|
const [activeTab, setActiveTab] = useState<DesignTab>('foundations');
|
|
const [themeMode, setThemeMode] = useState<ThemeMode>('dark');
|
|
const [sidebarItem, setSidebarItem] = useState<MenuItemId>('overview');
|
|
|
|
const theme = getTheme(themeMode);
|
|
|
|
const handleTabChange = (tab: DesignTab) => {
|
|
setActiveTab(tab);
|
|
setSidebarItem(FIRST_ITEM[tab]);
|
|
};
|
|
|
|
const renderContent = () => {
|
|
if (activeTab === 'foundations') {
|
|
switch (sidebarItem) {
|
|
case 'overview':
|
|
return <FoundationsOverview theme={theme} onNavigate={(id) => setSidebarItem(id as MenuItemId)} />;
|
|
case 'color':
|
|
return <ColorPaletteContent theme={theme} />;
|
|
case 'typography':
|
|
return <TypographyContent theme={theme} />;
|
|
case 'radius':
|
|
return <RadiusContent theme={theme} />;
|
|
case 'layout':
|
|
return <LayoutContent theme={theme} />;
|
|
default:
|
|
return <FoundationsOverview theme={theme} onNavigate={(id) => setSidebarItem(id as MenuItemId)} />;
|
|
}
|
|
}
|
|
switch (sidebarItem) {
|
|
case 'overview':
|
|
return <ComponentsOverview theme={theme} onNavigate={(id) => setSidebarItem(id as MenuItemId)} />;
|
|
case 'buttons':
|
|
return <ButtonContent theme={theme} />;
|
|
case 'text-field':
|
|
return <TextFieldContent theme={theme} />;
|
|
default:
|
|
return <ComponentsContent />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="h-screen w-screen overflow-hidden flex flex-col"
|
|
style={{ backgroundColor: theme.pageBg }}
|
|
>
|
|
<DesignHeader activeTab={activeTab} onTabChange={handleTabChange} theme={theme} onThemeToggle={() => setThemeMode(themeMode === 'dark' ? 'light' : 'dark')} />
|
|
<div className="flex flex-1 overflow-hidden">
|
|
<DesignSidebar theme={theme} activeTab={activeTab} activeItem={sidebarItem} onItemChange={setSidebarItem} />
|
|
<main className="flex-1 overflow-y-auto">
|
|
{renderContent()}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DesignPage;
|