<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" }} />