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}