116 lines
3.2 KiB
Svelte
116 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
|
|
let {
|
|
message,
|
|
type = 'error',
|
|
duration = 5000,
|
|
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 SVG path based on toast type
|
|
const getIconSvg = (type: string) => {
|
|
switch (type) {
|
|
case 'success':
|
|
return `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />`;
|
|
case 'warning':
|
|
return `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-2.694-.833-3.464 0L3.268 16c-.77.833.192 2.5 1.732 2.5z" />`;
|
|
case 'info':
|
|
return `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />`;
|
|
case 'error':
|
|
default:
|
|
return `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />`;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
{#if visible && message}
|
|
<div
|
|
class="rounded-lg border p-4 shadow-lg w-full {getToastStyles(type)}"
|
|
role="alert"
|
|
aria-live="polite"
|
|
>
|
|
<div class="flex items-start gap-3">
|
|
<!-- Icon -->
|
|
<div class="flex-shrink-0">
|
|
<svg
|
|
class="h-5 w-5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
{@html getIconSvg(type)}
|
|
</svg>
|
|
</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>
|
|
|
|
<!-- Toast has no progress bar as requested -->
|
|
</div>
|
|
{/if}
|