128 lines
3.0 KiB
Svelte
128 lines
3.0 KiB
Svelte
<script lang="ts">
|
||
import { onMount } from 'svelte';
|
||
|
||
let {
|
||
message,
|
||
type = 'error',
|
||
duration = 50000,
|
||
onDismiss
|
||
} = $props<{
|
||
message: string;
|
||
type?: 'error' | 'success' | 'warning' | 'info';
|
||
duration?: number;
|
||
onDismiss?: () => void;
|
||
}>();
|
||
|
||
let visible = $state(true);
|
||
let timeoutId: ReturnType<typeof setTimeout>;
|
||
|
||
// Auto-dismiss after specified duration
|
||
onMount(() => {
|
||
if (duration > 0) {
|
||
timeoutId = setTimeout(() => {
|
||
dismiss();
|
||
}, duration);
|
||
}
|
||
|
||
// Cleanup timeout on component destroy
|
||
return () => {
|
||
if (timeoutId) {
|
||
clearTimeout(timeoutId);
|
||
}
|
||
};
|
||
});
|
||
|
||
function dismiss() {
|
||
visible = false;
|
||
if (onDismiss) {
|
||
onDismiss();
|
||
}
|
||
}
|
||
|
||
// Get styles based on toast type
|
||
const getToastStyles = (type: string) => {
|
||
switch (type) {
|
||
case 'success':
|
||
return 'border-green-200 bg-green-50 text-green-800';
|
||
case 'warning':
|
||
return 'border-yellow-200 bg-yellow-50 text-yellow-800';
|
||
case 'info':
|
||
return 'border-blue-200 bg-blue-50 text-blue-800';
|
||
case 'error':
|
||
default:
|
||
return 'border-red-200 bg-red-50 text-red-800';
|
||
}
|
||
};
|
||
|
||
// Get icon based on toast type
|
||
const getIcon = (type: string) => {
|
||
switch (type) {
|
||
case 'success':
|
||
return '✓';
|
||
case 'warning':
|
||
return '⚠';
|
||
case 'info':
|
||
return 'ℹ';
|
||
case 'error':
|
||
default:
|
||
return '✕';
|
||
}
|
||
};
|
||
</script>
|
||
|
||
{#if visible && message}
|
||
<div
|
||
class="fixed top-4 left-4 z-50 max-w-sm rounded-lg border p-4 shadow-lg transition-all duration-300 ease-in-out {getToastStyles(type)}"
|
||
role="alert"
|
||
aria-live="polite"
|
||
>
|
||
<div class="flex items-start gap-3">
|
||
<!-- Icon -->
|
||
<div class="flex-shrink-0">
|
||
<span class="text-lg font-semibold" aria-hidden="true">
|
||
{getIcon(type)}
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Message -->
|
||
<div class="flex-1">
|
||
<p class="text-sm font-medium">
|
||
{message}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Close button -->
|
||
<button
|
||
onclick={dismiss}
|
||
class="flex-shrink-0 ml-2 text-current opacity-70 hover:opacity-100 transition-opacity"
|
||
aria-label="Dismiss notification"
|
||
>
|
||
<svg class="h-4 w-4" 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>
|
||
|
||
<!-- Progress bar for auto-dismiss -->
|
||
{#if duration > 0}
|
||
<div class="mt-2 h-1 w-full bg-black bg-opacity-10 rounded-full overflow-hidden">
|
||
<div
|
||
class="h-full bg-current opacity-30 transition-all ease-linear"
|
||
style="animation: progress {duration}ms linear forwards;"
|
||
></div>
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
{/if}
|
||
|
||
<style>
|
||
@keyframes progress {
|
||
from {
|
||
width: 100%;
|
||
}
|
||
to {
|
||
width: 0%;
|
||
}
|
||
}
|
||
</style>
|