Toast

<div class="relative h-56">
  <Toast>My Toast</Toast>
</div>

<script lang="ts">
	import { Toast, Avatar } from 'svelte-5-ui-lib';
</script>

<div class="flex h-[140px] flex-col items-center">
	<Toast align={false}>
		<span class="font-semibold text-gray-900 dark:text-white">New notification</span>
		<div class="mt-3 flex items-center">
			<Avatar src="/images/profile-picture-3.webp" alt="Bonnie Green" />
			<div class="ms-3">
				<h4 class="text-sm font-semibold text-gray-900 dark:text-white">Bonnie Green</h4>
				<div class="text-sm font-normal">commented on your photo</div>
				<span class="text-primary-600 dark:text-primary-500 text-xs font-medium"
					>a few seconds ago</span
				>
			</div>
		</div>
	</Toast>
</div>

<script lang="ts">
	import { Avatar, Button, Toast } from 'svelte-5-ui-lib';
</script>

<div class="flex h-[180px] flex-col items-center">
	<Toast align={false} iconClass="w-10 h-10 rounded-full">
		{#snippet icon()}
			<Avatar src="/images/profile-picture-1.webp" alt="Jese Leos" />
		{/snippet}
		<div class="ms-3 text-sm font-normal">
			<span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
			<div class="mb-2 text-sm font-normal">
				Hi Neil, thanks for sharing your thoughts regarding Flowbite.
			</div>
			<Button size="xs">Reply</Button>
		</div>
	</Toast>
</div>

<script lang="ts">
	import { Button, Toast } from 'svelte-5-ui-lib';
	let toastUndoStatus: boolean = $state(true);
	const changeUndoStatus = () => {
		toastUndoStatus = !toastUndoStatus;
	};
</script>

<div class="flex flex-col items-center">
	<div class="mb-4 h-16">
		<Toast
			bind:toastStatus={toastUndoStatus}
			iconClass="w-full text-sm font-normal flex items-center justify-between"
		>
			Conversation archived.
			<a
				class="text-primary-600 hover:bg-primary-100 dark:text-primary-500 ms-auto rounded-lg p-1.5 font-medium dark:hover:bg-gray-700"
				href="/">Undo</a
			>
		</Toast>
	</div>
	<Button class="w-36" disabled={toastUndoStatus ? true : false} onclick={changeUndoStatus}
		>Open toast</Button
	>
</div>