SettingsSection

<SettingsSection
	title="Monitor defaults"
	description="Applied to every monitor you create from now on."
	save="explicit"
	form={{ action: "/settings/monitors" }}
	labels={{ save: "Save defaults" }}
>
	<SettingsSection.Row label="Check interval" description="How often each URL is requested." htmlFor="interval">
		<Select id="interval" name="interval">
			<Select.Option value="30">Every 30 seconds</Select.Option>
			<Select.Option value="60" selected>Every minute</Select.Option>
			<Select.Option value="300">Every 5 minutes</Select.Option>
		</Select>
	</SettingsSection.Row>
	<SettingsSection.Row label="Timeout" description="A check slower than this counts as down." htmlFor="timeout">
		<Input id="timeout" name="timeoutMs" type="number" defaultValue="10000" />
	</SettingsSection.Row>
	<SettingsSection.Row label="Alert email" htmlFor="alert-email" layout="stacked">
		<Input id="alert-email" name="alertEmail" type="email" defaultValue="oncall@acme.dev" />
	</SettingsSection.Row>
</SettingsSection>

<SettingsSection
	title="Notifications"
	description="Each change saves as soon as you flip it."
	save="instant"
	form={{ action: "/settings/notifications" }}
	labels={{ save: "Save notifications" }}
>
	<SettingsSection.Row layout="inline-switch" label="Email me when a monitor goes down" labelId="down">
		<Switch name="emailOnDown" aria-labelledby="down" checked />
	</SettingsSection.Row>
	<SettingsSection.Row
		layout="inline-switch"
		label="Weekly uptime report"
		description="Sent on Monday at 9:00 in your time zone."
		labelId="weekly"
		descriptionId="weekly-help"
	>
		<Switch name="weeklyReport" aria-labelledby="weekly" aria-describedby="weekly-help" />
	</SettingsSection.Row>
</SettingsSection>

<SettingsSection
	title="Members"
	description="People who can see and edit this team's monitors."
	save="none"
	actions={<Button size="sm" variant="outline">Invite member</Button>}
>
	<Table.Container>
		<Table aria-label="Members">
			<Table.Header>
				<Table.Row>
					<Table.Column>Email</Table.Column>
					<Table.Column>Role</Table.Column>
				</Table.Row>
			</Table.Header>
			<Table.Body>
				{MEMBERS.map((member) => (
					<Table.Row key={member.email}>
						<Table.Cell>{member.email}</Table.Cell>
						<Table.Cell>{member.role}</Table.Cell>
					</Table.Row>
				))}
			</Table.Body>
		</Table>
	</Table.Container>
</SettingsSection>

<SettingsSection title="Billing" description="Your plan and how you pay for it." save="none">
	<SettingsSection.Row
		layout="action"
		label="Subscription & payments"
		description="Change your plan, update the card on file and download invoices."
	>
		<LinkButton href="/billing/portal" size="sm" variant="outline">Open billing portal</LinkButton>
	</SettingsSection.Row>
	<SettingsSection.Row
		layout="action"
		actionPlacement="below"
		label="Cancel subscription"
		description="Your monitors keep running until the end of the billing period, then stop. Invoices stay available in the billing portal."
	>
		<Button size="sm" variant="outline" color="danger">Cancel subscription</Button>
	</SettingsSection.Row>
</SettingsSection>