Drawer

<script lang="ts">
	import Button from '@tcpsystems/ui/foundation/Button';
	import Drawer from '@tcpsystems/ui/foundation/Drawer';
	const uid = $props.id();
</script>

<Button data-tcp-open={uid}>View request</Button>
<Drawer id={uid} title="Request 9f3a21">
	<p>POST /v1/chat/completions returned 200 in 412 ms.</p>
	<p>Routed to the primary pool with 1,204 prompt tokens and 318 completion tokens.</p>
</Drawer>

<script lang="ts">
	import Button from '@tcpsystems/ui/foundation/Button';
	import Drawer from '@tcpsystems/ui/foundation/Drawer';
	const uid = $props.id();
	let saved = $state(false);
</script>

<Button variant="primary" data-tcp-open={uid}>{saved ? 'Filters saved' : 'Edit filters'}</Button>
<Drawer id={uid} title="Filters">
	<p>Show only requests with status 5xx from the last 24 hours.</p>
	{#snippet foot()}
		<form method="dialog"><Button type="submit">Cancel</Button></form>
		<form method="dialog"><Button type="submit" variant="primary" onclick={() => (saved = true)}>Apply filters</Button></form>
	{/snippet}
</Drawer>

<script lang="ts">
	import Button from '@tcpsystems/ui/foundation/Button';
	import Drawer from '@tcpsystems/ui/foundation/Drawer';
	const uid = $props.id();
</script>

<Button icon="menu" data-tcp-open={uid}>Navigation</Button>
<Drawer id={uid} title="Workspaces" side="start">
	<p>Production, Staging and Sandbox workspaces are available to your team.</p>
</Drawer>

<script lang="ts">
	import Button from '@tcpsystems/ui/foundation/Button';
	import Drawer from '@tcpsystems/ui/foundation/Drawer';
	const uid = $props.id();
</script>

<Button variant="ghost" data-tcp-open={uid}>Release notes</Button>
<Drawer id={uid} title="Release 2.4.0" closeLabel="Close release notes">
	<p>Adds streaming usage metrics, faster cold starts and a new audit log export.</p>
</Drawer>