46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { AppShell } from '@/ui/AppShell';
|
|
import { ControlBar } from '@/ui/ControlBar';
|
|
import { TopNav } from '@/ui/TopNav';
|
|
import { ContentViewport } from '@/ui/ContentViewport';
|
|
import { GlobalSidebarTemplate } from './GlobalSidebarTemplate';
|
|
import { GlobalFooterTemplate } from './GlobalFooterTemplate';
|
|
import { HeaderContentTemplate } from './HeaderContentTemplate';
|
|
import { Box } from '@/ui/Box';
|
|
|
|
export interface RootAppShellViewData {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* RootAppShellTemplate orchestrates the top-level semantic shells of the application.
|
|
* It follows the "Telemetry Workspace" structure:
|
|
* - ControlBar = header/control bar
|
|
* - DashboardRail = sidebar rail
|
|
* - ContentViewport = content area
|
|
*/
|
|
export function RootAppShellTemplate({ children }: RootAppShellViewData) {
|
|
return (
|
|
<AppShell>
|
|
<ControlBar>
|
|
<TopNav>
|
|
<HeaderContentTemplate />
|
|
</TopNav>
|
|
</ControlBar>
|
|
|
|
<Box display="flex" flexGrow={1} overflow="hidden">
|
|
<GlobalSidebarTemplate />
|
|
|
|
<Box display="flex" flexGrow={1} flexDirection="col" overflow="hidden">
|
|
<ContentViewport>
|
|
{children}
|
|
</ContentViewport>
|
|
<GlobalFooterTemplate />
|
|
</Box>
|
|
</Box>
|
|
</AppShell>
|
|
);
|
|
}
|