Varsel

<script lang="ts">
	import { toast } from "varsel";

	function showToast() {
		toast({
			title: "Toast pinned to top-left",
			description: "Each anchor keeps its own stack.",
			position: "top-left",
		});
	}
</script>

<button onclick={showToast}>top-left</button>

<script lang="ts">
	import { toast } from "varsel";

	function showToast() {
		toast({
			title: "default toast",
			description: "Pick the tone that matches the event.",
			variant: "default",
		});
	}
</script>

<button onclick={showToast}>Try default</button>

<script lang="ts">
	import { toast } from "varsel";

	function showShortToast() {
		toast({
			title: "Saved",
			description: "Done!",
			duration: 1500,
		});
	}
</script>

<button onclick={showShortToast}>Short toast</button>

<script lang="ts">
	import { toast } from "varsel";

	function showActionToast() {
		toast({
			title: "Email scheduled",
			description: "Will send in ten minutes.",
			action: {
				label: "Undo",
				onClick: () => {
					console.log("Email cancelled");
				},
			},
		});
	}
</script>

<button onclick={showActionToast}>Try the action toast</button>

<script lang="ts">
	import { toast } from "varsel";

	const mockDeploy = () =>
		new Promise<string>((resolve) => {
			setTimeout(() => {
				resolve("Production now serves build #542.");
			}, 1200);
		});

	function runDeployment() {
		toast.promise(mockDeploy(), {
			loading: {
				title: "Deploying build",
				description: "Packing assets and running health checks...",
			},
			success: (message) => ({
				title: "Deployment complete",
				description: message,
				variant: "success",
			}),
			error: {
				title: "Deployment failed",
				description: "Something went wrong while talking to the server.",
			},
		});
	}
</script>

<button onclick={runDeployment}>Simulate success</button>

<script lang="ts">
	import HeadlessToast from "$lib/components/HeadlessToast.svelte";
	import { toast } from "varsel";

	function showCustomToast() {
		toast.custom(HeadlessToast, {
			duration: 100000,
			componentProps: {
				title: "This is a headless toast",
				description:
					"You have full control of styles and markup, while still having the animations.",
				button: {
					label: "Reply",
					onClick: () => console.log("Reply clicked"),
				},
			},
		});
	}
</script>

<button onclick={showCustomToast}>Render toast</button>

<script lang="ts">
	import { toast as varselToast, type PositionedToast } from "varsel";

	type Props = {
		id: string;
		toast: PositionedToast;
		title: string;
		description: string;
		button: {
			label: string;
			onClick: () => void;
		};
	};

	let { id, title, description, button }: Props = $props();
</script>

<div
	class="mx-auto flex w-full max-w-91 items-center rounded-lg bg-white p-4 shadow-lg ring-1 ring-black/5 dark:bg-zinc-900 dark:ring-white/10"
>
	<div class="flex flex-1 items-center">
		<div class="w-full">
			<p class="text-sm font-medium text-gray-900 dark:text-gray-100">{title}</p>
			<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{description}</p>
		</div>
	</div>
	<div class="ml-5 shrink-0">
		<button
			class="cursor-pointer rounded bg-indigo-50 px-3 py-1 text-sm font-semibold text-indigo-600 hover:bg-indigo-100 dark:bg-indigo-950/50 dark:text-indigo-400 dark:hover:bg-indigo-900/50"
			onclick={() => {
				button.onClick();
				varselToast.dismiss(id);
			}}
		>
			{button.label}
		</button>
	</div>
</div>