Toast

templ ToastDemo() {
	<div class="flex flex-col items-center gap-4 p-4">
		@ui.ToastViewport("", nil)
		<button
			type="button"
			class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2"
			x-data
			x-on:click={ `$store.toast.add({ title: 'Scheduled: Catch up', description: 'Friday, February 10, 2023 at 5:57 PM' })` }
		>
			Add to calendar
		</button>
		<button
			type="button"
			class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors border border-destructive text-destructive shadow-sm hover:bg-destructive/10 h-9 px-4 py-2"
			x-data
			x-on:click={ `$store.toast.add({ title: 'Uh oh! Something went wrong.', description: 'There was a problem with your request.', variant: 'destructive' })` }
		>
			Show Destructive Toast
		</button>
	</div>
}