SettingsLayout
The frame of a settings area.
View code
<SettingsLayout
sections={[
{
label: "Workspace",
items: [
{ href: "/settings/general", label: "General" },
{ href: "/settings/monitors", label: "Monitors", current: true },
{ href: "/settings/status-pages", label: "Status pages" },
{ href: "/settings/members", label: "Members" },
{ href: "/settings/billing", label: "Billing" },
],
},
{
label: "Account",
items: [
{ href: "/settings/profile", label: "Profile" },
{ href: "/settings/notifications", label: "Notifications" },
],
},
]}
backHref="/settings"
labels={{ nav: "Settings", back: "Settings" }}
>
<SettingsSection
title="Monitor defaults"
description="Applied to every monitor you create from now on."
form={{ action: "/settings/monitors" }}
labels={{ save: "Save defaults" }}
>
<SettingsSection.Row label="Alert email" description="Where down alerts go." htmlFor="alert-email">
<Input id="alert-email" name="alertEmail" type="email" defaultValue="oncall@acme.dev" />
</SettingsSection.Row>
</SettingsSection>
</SettingsLayout>
// On /settings itself, render the nav alone on a phone:
<SettingsLayout sections={sections} page="index" labels={{ nav: "Settings", back: "Settings" }} />Demo apps
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- CMSInkwellInkwell, a demo CMS built from @sdxc/ui/app: posts with count tabs and quick edit, an editor with a quiet save status and a loud Publish, media and settings./demo/apps/inkwell
- Ops dashboardPulsePulse, an invented ops dashboard: Northwind's services with live filters, a peek sheet and a bulk bar, metrics that switch one chart, incidents, deploys and settings./demo/apps/pulse
- Support inboxRelayRelay, an invented support inbox: mailboxes, conversations and the open conversation on one screen, with contacts, reports and settings./demo/apps/relay
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { SettingsLayout } from "@sdxc/ui/app";Renders the nav and the content column. Both are in the markup on every route and the
container decides which one a narrow screen shows, so the layout needs no script and
follows a resized pane. Without sections the content shows on every route.
Examples
<SettingsLayout backHref="/settings" labels={{ back: "Settings" }}>…</SettingsLayout>Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
sections | ReadonlyArray<Group> | No | The nav's groups of sections. Omit them where the app shell's swapped panel already lists the sections: the layout is then the content column alone at every width. |
page | "index" | "section" | No | Which route renders the layout. "index" is the settings root, which a narrow container shows as the nav alone; "section" shows a section's content. |
backHref | string | No | Where the narrow back link returns to: the settings index route. |
labels | Labels | Yes |
Also accepts everything in TagProps<"div">.