Add "docs" for toaster

frontend/src/App.svelte

@@ -4,7 +4,58 @@
 	import { Toaster } from "svelte-sonner";
 </script>
 
-<Toaster theme="dark" />
+<!-- 
+<Toaster
+	toastOptions={{
+		unstyled: true,
+		classes: {
+			toast: 'bg-blue-400',
+			title: 'text-red-400',
+			description: 'text-red-400',
+			actionButton: 'bg-zinc-400',
+			cancelButton: 'bg-orange-400',
+			closeButton: 'bg-lime-400'
+		}
+	}}
+/>
+
+toast('Hello World', {
+	unstyled: true,
+	classes: {
+		toast: 'bg-blue-400',
+		title: 'text-red-400 text-2xl',
+		description: 'text-red-400',
+		actionButton: 'bg-zinc-400',
+		cancelButton: 'bg-orange-400',
+		closeButton: 'bg-lime-400'
+	}
+});
+
+<Toaster
+	toastOptions={{
+		unstyled: true,
+		classes: {
+			error: 'bg-red-400',
+			success: 'text-green-400',
+			warning: 'text-yellow-400',
+			info: 'bg-blue-400'
+		}
+	}}
+/>
+
+<Toaster>
+	<LoadingIcon slot="loading-icon" />
+	<SuccessIcon slot="success-icon" />
+	<ErrorIcon slot="error-icon" />
+	<InfoIcon slot="info-icon" />
+	<WarningIcon slot="warning-icon" />
+</Toaster>
+
+<Toaster duration={10000} />
+
+<Toaster hotkey={['KeyC']} />
+-->
+<Toaster theme="dark" expand visibleToasts={9} />
 <template>
 	<Header />
 	<main class="flex-1">