{"name":"application-shell","type":"registry:block","title":"Application shell","description":"Navigate a responsive workspace with a sidebar, header, and content region. Application shell — complete application example.","docs":"https://ui.siteplane.io/docs-markdown/examples/application-shell.md","categories":["Examples"],"registryDependencies":["@siteplane/card","@siteplane/dashboard-shell","@siteplane/settings-list","@siteplane/sidebar","@siteplane/switch"],"dependencies":["lucide-react@1.18.0"],"files":[{"path":"apps/site/src/examples/application-shell/default.tsx","type":"registry:file","target":"~/src/components/application-shell.tsx","content":"\"use client\";\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/siteplane/components/card/index\";\nimport {\n  DashboardShell,\n  DashboardShellHeader,\n  DashboardShellInset,\n  DashboardShellMain,\n  DashboardShellPrimary,\n  DashboardShellSidebar,\n  DashboardShellSidebarHeader,\n  DashboardShellSidebarTrigger,\n} from \"@/siteplane/components/dashboard-shell/index\";\nimport {\n  SettingsList,\n  SettingsListItem,\n} from \"@/siteplane/components/settings-list/index\";\nimport {\n  SidebarBrand,\n  SidebarContent,\n  SidebarGroup,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/siteplane/components/sidebar/index\";\nimport { Switch } from \"@/siteplane/components/switch/index\";\nimport { FolderIcon, HomeIcon, SettingsIcon } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst navigation = [\n  { label: \"Overview\", icon: HomeIcon },\n  { label: \"Projects\", icon: FolderIcon },\n  { label: \"Settings\", icon: SettingsIcon },\n] as const;\n\ntype Page = (typeof navigation)[number][\"label\"];\n\nconst pages = {\n  Overview: {\n    title: \"Recent activity\",\n    description: \"Updates from your projects this week.\",\n    items: [\n      \"Website redesign moved to review\",\n      \"Ben Carter joined Mobile application\",\n      \"Sofia Nguyen shared Customer research\",\n    ],\n  },\n  Projects: {\n    title: \"Active projects\",\n    description: \"Projects your team is working on.\",\n    items: [\"Website redesign\", \"Mobile application\", \"Customer research\"],\n  },\n};\n\nexport default function Example() {\n  const [active, setActive] = useState<Page>(\"Overview\");\n  const [notifications, setNotifications] = useState(true);\n  return (\n    <div className=\"relative h-[32rem] w-full overflow-hidden [transform:translateZ(0)]\">\n      <DashboardShell className=\"h-full min-h-0\">\n        <DashboardShellSidebar className=\"h-full\" collapsible=\"offcanvas\">\n          <DashboardShellSidebarHeader>\n            <SidebarBrand>Acme</SidebarBrand>\n          </DashboardShellSidebarHeader>\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarMenu>\n                {navigation.map(({ label, icon: Icon }) => (\n                  <SidebarMenuItem key={label}>\n                    <SidebarMenuButton\n                      active={active === label}\n                      onClick={() => setActive(label)}\n                    >\n                      <Icon />\n                      <span>{label}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroup>\n          </SidebarContent>\n        </DashboardShellSidebar>\n        <DashboardShellInset>\n          <DashboardShellHeader>\n            <DashboardShellSidebarTrigger />\n            <h1 className=\"font-semibold\">{active}</h1>\n          </DashboardShellHeader>\n          <DashboardShellPrimary>\n            <DashboardShellMain>\n              {active === \"Settings\" ? (\n                <SettingsList\n                  title=\"Notifications\"\n                  description=\"Choose which updates you receive.\"\n                >\n                  <SettingsListItem\n                    title=\"Project updates\"\n                    description=\"Notify me when a project changes.\"\n                    control={(props) => (\n                      <Switch\n                        {...props}\n                        checked={notifications}\n                        onCheckedChange={setNotifications}\n                      />\n                    )}\n                  />\n                </SettingsList>\n              ) : (\n                <Card>\n                  <CardHeader>\n                    <CardTitle>{pages[active].title}</CardTitle>\n                    <CardDescription>\n                      {pages[active].description}\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent>\n                    <ul className=\"grid gap-3 text-sm\">\n                      {pages[active].items.map((item) => (\n                        <li key={item}>{item}</li>\n                      ))}\n                    </ul>\n                  </CardContent>\n                </Card>\n              )}\n            </DashboardShellMain>\n          </DashboardShellPrimary>\n        </DashboardShellInset>\n      </DashboardShell>\n    </div>\n  );\n}\n"}]}