105 lines
3.3 KiB
TypeScript
105 lines
3.3 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 { FloatContent } from './FloatContent';
|
|
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} />;
|
|
case 'float':
|
|
return <FloatContent 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;
|