39 lines
1.2 KiB
JavaScript
39 lines
1.2 KiB
JavaScript
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
||
|
|
import { styled } from '@lilith/ui-styled-components';
|
||
|
|
import { Sidebar } from './components/Sidebar';
|
||
|
|
const AppContainer = styled.div `
|
||
|
|
height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
overflow: hidden;
|
||
|
|
`;
|
||
|
|
const MainContent = styled.main `
|
||
|
|
flex: 1;
|
||
|
|
padding: ${({ theme }) => theme.spacing.xl};
|
||
|
|
overflow-y: auto;
|
||
|
|
min-width: 0;
|
||
|
|
`;
|
||
|
|
/**
|
||
|
|
* AdminShell provides a consistent layout for admin dashboards.
|
||
|
|
*
|
||
|
|
* Features:
|
||
|
|
* - Responsive sidebar with navigation sections
|
||
|
|
* - Configurable logo with optional badge
|
||
|
|
* - Theme-aware styling with accent color support
|
||
|
|
* - Scrollable main content area
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
* ```tsx
|
||
|
|
* <AdminShell
|
||
|
|
* logo={{ title: 'Platform Admin', subtitle: 'Lilith Platform' }}
|
||
|
|
* navigation={NAVIGATION_SECTIONS}
|
||
|
|
* accentColor="primary"
|
||
|
|
* footerText="Lilith Platform v0.1.0"
|
||
|
|
* >
|
||
|
|
* <Routes>...</Routes>
|
||
|
|
* </AdminShell>
|
||
|
|
* ```
|
||
|
|
*/
|
||
|
|
export function AdminShell({ logo, navigation, footerText, accentColor = 'primary', children, }) {
|
||
|
|
return (_jsxs(AppContainer, { children: [_jsx(Sidebar, { logo: logo, navigation: navigation, footerText: footerText, accentColor: accentColor }), _jsx(MainContent, { children: children })] }));
|
||
|
|
}
|