Sonner

templ SonnerDemo() {
	<div class="flex flex-col items-center gap-4 p-4">
		@ui.SonnerToaster("", nil)
		<button
			type="button"
			class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2"
			x-data
			x-on:click={ `$store.sonner.add({ message: 'Your message has been sent.', title: 'Event has been created' })` }
		>
			Show Toast
		</button>
		<button
			type="button"
			class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2"
			x-data
			x-on:click={ `$store.sonner.add({ message: 'Something went wrong.', type: 'error', title: 'Error' })` }
		>
			Show Error Toast
		</button>
		<button
			type="button"
			class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2"
			x-data
			x-on:click={ `$store.sonner.add({ message: 'Action completed successfully.', type: 'success', title: 'Success' })` }
		>
			Show Success Toast
		</button>
	</div>
}