AppShell

import {
  AppShell,
  AppShellHeader,
  AppShellMain,
  AppShellSidebar,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Header,
  HeaderBrand,
  Sidebar,
  SidebarItem,
  SidebarNav,
  SidebarSection,
  SidebarSectionTitle,
} from "@froggdesign/enter-ui";

export function Example() {
  return (
    <AppShell style={{ minHeight: 300 }}>
      <AppShellHeader><Header><HeaderBrand>Console</HeaderBrand></Header></AppShellHeader>
      <AppShellSidebar>
        <Sidebar>
          <SidebarSection>
            <SidebarSectionTitle>Workspace</SidebarSectionTitle>
            <SidebarNav><SidebarItem href="#" active>Overview</SidebarItem></SidebarNav>
          </SidebarSection>
        </Sidebar>
      </AppShellSidebar>
      <AppShellMain style={{ padding: 20 }}>
        <Card>
          <CardHeader><CardTitle>Workspace overview</CardTitle></CardHeader>
          <CardContent>Use AppShell as a layout primitive, not a full app framework.</CardContent>
        </Card>
      </AppShellMain>
    </AppShell>
  );
}