69 lines
2.3 KiB
Svelte
69 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { toast } from "$lib/stores/toast";
|
|
import { fly, fade } from "svelte/transition";
|
|
import { quintOut } from "svelte/easing";
|
|
|
|
// Icons for different toast types
|
|
const icons = {
|
|
success: {
|
|
path: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z",
|
|
color: "text-green-500",
|
|
bg: "bg-green-500/10",
|
|
border: "border-green-500/20",
|
|
},
|
|
error: {
|
|
path: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z",
|
|
color: "text-red-500",
|
|
bg: "bg-red-500/10",
|
|
border: "border-red-500/20",
|
|
},
|
|
warning: {
|
|
path: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z",
|
|
color: "text-yellow-500",
|
|
bg: "bg-yellow-500/10",
|
|
border: "border-yellow-500/20",
|
|
},
|
|
info: {
|
|
path: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",
|
|
color: "text-blue-500",
|
|
bg: "bg-blue-500/10",
|
|
border: "border-blue-500/20",
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<!-- Toast Container -->
|
|
<div class="fixed top-4 right-4 z-[9999] flex flex-col gap-2 pointer-events-none">
|
|
{#each $toast.toasts as toastItem (toastItem.id)}
|
|
{@const style = icons[toastItem.type]}
|
|
<div
|
|
in:fly={{ y: -20, duration: 300, easing: quintOut }}
|
|
out:fade={{ duration: 200 }}
|
|
class="pointer-events-auto flex items-center gap-3 px-4 py-3 bg-[var(--color-surface)] backdrop-blur-lg border {style.border} rounded-lg shadow-2xl min-w-[300px] max-w-md"
|
|
>
|
|
<!-- Icon -->
|
|
<div class="flex-shrink-0 w-6 h-6 rounded-full {style.bg} flex items-center justify-center">
|
|
<svg class="w-4 h-4 {style.color}" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d={style.path}/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Message -->
|
|
<p class="flex-1 text-sm text-white font-medium">
|
|
{toastItem.message}
|
|
</p>
|
|
|
|
<!-- Close button -->
|
|
<button
|
|
onclick={() => toast.dismiss(toastItem.id)}
|
|
class="flex-shrink-0 text-gray-400 hover:text-white transition-colors"
|
|
aria-label="Dismiss"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
{/each}
|
|
</div>
|