ConfirmPopover

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

{#if removed}
	<p>Dana Whitfield was removed from the team.</p>
{:else}
	<ConfirmPopover id={uid} label="Remove member" question="Remove Dana Whitfield from the team?" confirmLabel="Remove" onconfirm={() => (removed = true)} />
{/if}

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

<ConfirmPopover id={uid} label="Purge cache" question="Purge the edge cache?" confirmLabel="Purge">
	<p>The next 2,000 requests will hit the origin while the cache warms.</p>
</ConfirmPopover>

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

<ConfirmPopover id={uid} label={paused ? 'Paused' : 'Pause sync'} tone="neutral" question="Pause nightly sync?" confirmLabel="Pause" cancelLabel="Keep running" onconfirm={() => (paused = true)} />

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

<ConfirmPopover id={uid} label="Delete backup" question="Delete backup from 2 Nov?" confirmLabel="Delete" pending>
	<p>Deleting 4.2 GB…</p>
</ConfirmPopover>