Toolbar

<script lang="ts">
	import Toolbar from '@tcpsystems/ui/foundation/Toolbar';
	import Input from '@tcpsystems/ui/foundation/Input';
	import Button from '@tcpsystems/ui/foundation/Button';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
	import Icon from '@tcpsystems/ui/foundation/Icon';
	const uid = $props.id();
	let query = $state('');
</script>

<Toolbar>
	{#snippet search()}
		<Input id={uid} type="search" placeholder="Filter deployments…" bind:value={query} aria-label="Filter deployments" />
	{/snippet}
	{#snippet end()}
		<Cluster>
			<Button variant="ghost" icon="filter" aria-label="Filters" />
			<Button variant="primary" icon="plus">New deployment</Button>
		</Cluster>
	{/snippet}
	<Cluster>
		<Button variant="ghost">All</Button>
		<Button variant="ghost">Production</Button>
		<Button variant="ghost">Staging</Button>
	</Cluster>
</Toolbar>

<script lang="ts">
	import Toolbar from '@tcpsystems/ui/foundation/Toolbar';
	import Button from '@tcpsystems/ui/foundation/Button';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Badge from '@tcpsystems/ui/foundation/Badge';
</script>

<Stack data-gap="lg">
	<Toolbar>
		{#snippet end()}
			<Cluster>
				<Badge tone="ok">12 selected</Badge>
				<Button variant="ghost" icon="download" aria-label="Export selection" />
				<Button variant="ghost" icon="trash" aria-label="Delete selection" />
			</Cluster>
		{/snippet}
		<Cluster>
			<Button variant="ghost" icon="columns" aria-label="Columns" />
			<Button variant="ghost" icon="filter" aria-label="Filters" />
			<Button variant="primary" icon="plus">Add member</Button>
		</Cluster>
	</Toolbar>

	<Toolbar>
		{#snippet end()}
			<Cluster>
				<Button variant="ghost" icon="chevron-left" aria-label="Previous page" />
				<Button variant="ghost" icon="chevron-right" aria-label="Next page" />
			</Cluster>
		{/snippet}
		<Cluster>
			<Button variant="ghost">Page 1 of 4</Button>
		</Cluster>
	</Toolbar>
</Stack>