Menu

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

<Menu
	id={uid}
	label="Deployment actions"
	items={[
		{ label: 'View deployment', href: '#' },
		{ label: 'Open logs', href: '#' },
		{ label: 'Redeploy' },
		{ separator: true },
		{ label: 'Delete deployment', tone: 'danger' }
	]}
/>

<script lang="ts">
	import Menu from '@tcpsystems/ui/foundation/Menu';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
	const uid = $props.id();
	const small = uid + '-small';
	const medium = uid + '-medium';
</script>

<Cluster>
	<Menu
		id={small}
		label="Invoice actions"
		size="sm"
		items={[
			{ label: 'Download PDF', href: '#' },
			{ label: 'Resend receipt', disabled: true },
			{ separator: true },
			{ label: 'Void invoice', tone: 'danger' }
		]}
	/>
	<Menu
		id={medium}
		label="Team member actions"
		size="md"
		icon="settings"
		items={[
			{ label: 'Edit role', href: '#' },
			{ label: 'Reset access' },
			{ label: 'Remove from team', tone: 'danger' }
		]}
	/>
</Cluster>