1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
import { useEffect, useState } from 'react'
import { useToastStore, type ToastType } from '@/stores/useToastStore'
const typeColors: Record<ToastType, string> = {
success: 'var(--color-semantic-success)',
error: 'var(--color-semantic-error)',
info: 'var(--color-semantic-info)',
warning: 'var(--color-semantic-warning)',
}
const typeIcons: Record<ToastType, string> = {
success: '✓',
error: '✗',
info: 'i',
warning: '!',
}
function ToastItem({ id, message, type }: { id: string; message: string; type: ToastType }) {
const [exiting, setExiting] = useState(false)
const removeToast = useToastStore((s) => s.removeToast)
const color = typeColors[type]
useEffect(() => {
const exitTimer = setTimeout(() => setExiting(true), 3000)
return () => clearTimeout(exitTimer)
}, [])
return (
<div
className={`flex items-start gap-2.5 min-w-[280px] max-w-[400px] px-3 py-2.5 rounded-lg shadow-glass-lg toast${exiting ? ' toast-exit' : ''}`}
style={{
backgroundColor: 'var(--color-panel-bg)',
border: '1px solid var(--color-panel-border)',
borderLeft: `3px solid ${color}`,
}}
role="alert"
onAnimationEnd={() => { if (exiting) removeToast(id) }}
>
<span
className="flex items-center justify-center w-[18px] h-[18px] mt-[1px] rounded-full text-[10px] font-bold shrink-0"
style={{ backgroundColor: color, color: '#fff' }}
>
{typeIcons[type]}
</span>
<span className="flex-1 text-ui-sm text-text-primary leading-[1.4]">{message}</span>
<button
className="shrink-0 text-text-muted hover:text-text-primary transition-colors duration-fast"
onClick={() => removeToast(id)}
>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
</div>
)
}
export default function Toasts() {
const toasts = useToastStore((s) => s.toasts)
if (toasts.length === 0) return null
return (
<div className="fixed bottom-4 right-4 z-50 flex flex-col-reverse gap-2 pointer-events-none">
{toasts.map((t) => (
<div key={t.id} className="pointer-events-auto">
<ToastItem id={t.id} message={t.message} type={t.type} />
</div>
))}
</div>
)
}
|
