Open in a new tab
View code
tsx
{selected ? (
	<DetailSheet
		id="monitor"
		title="api.example.com"
		description="HTTPS · every 30 seconds"
		closeHref="/monitors#monitor-3"
		permalink="/monitors/3"
		position={{ index: 3, total: 84, previousHref: "/monitors?pane=2", nextHref: "/monitors?pane=4" }}
		footer={<Button variant="outline">Pause monitor</Button>}
		labels={{
			close: "Close",
			copyLink: "Copy link",
			linkCopied: "Link copied",
			previous: "Previous monitor",
			next: "Next monitor",
			position: "Monitor",
		}}
	>
		<PropertyList>…</PropertyList>
		<Timeline aria-label="Recent activity">…</Timeline>
	</DetailSheet>
) : null}