84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { X, CheckCircle, XCircle, AlertTriangle, Info } from 'lucide-react'
|
|
import { clsx } from 'clsx'
|
|
import { useToastStore, type Toast as ToastType } from '@/store/toast'
|
|
|
|
const icons = {
|
|
success: CheckCircle,
|
|
error: XCircle,
|
|
warning: AlertTriangle,
|
|
info: Info,
|
|
}
|
|
|
|
const styles = {
|
|
success: 'bg-green-500/20 border-green-500/50 text-green-400',
|
|
error: 'bg-red-500/20 border-red-500/50 text-red-400',
|
|
warning: 'bg-yellow-500/20 border-yellow-500/50 text-yellow-400',
|
|
info: 'bg-blue-500/20 border-blue-500/50 text-blue-400',
|
|
}
|
|
|
|
const iconStyles = {
|
|
success: 'text-green-500',
|
|
error: 'text-red-500',
|
|
warning: 'text-yellow-500',
|
|
info: 'text-blue-500',
|
|
}
|
|
|
|
interface ToastItemProps {
|
|
toast: ToastType
|
|
onRemove: (id: string) => void
|
|
}
|
|
|
|
function ToastItem({ toast, onRemove }: ToastItemProps) {
|
|
const [isVisible, setIsVisible] = useState(false)
|
|
const [isLeaving, setIsLeaving] = useState(false)
|
|
const Icon = icons[toast.type]
|
|
|
|
useEffect(() => {
|
|
// Trigger enter animation
|
|
requestAnimationFrame(() => setIsVisible(true))
|
|
}, [])
|
|
|
|
const handleRemove = () => {
|
|
setIsLeaving(true)
|
|
setTimeout(() => onRemove(toast.id), 200)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'flex items-start gap-3 p-4 rounded-lg border backdrop-blur-sm shadow-lg',
|
|
'transition-all duration-200 ease-out',
|
|
styles[toast.type],
|
|
isVisible && !isLeaving ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'
|
|
)}
|
|
>
|
|
<Icon className={clsx('w-5 h-5 flex-shrink-0 mt-0.5', iconStyles[toast.type])} />
|
|
<p className="flex-1 text-sm text-white">{toast.message}</p>
|
|
<button
|
|
onClick={handleRemove}
|
|
className="flex-shrink-0 text-gray-400 hover:text-white transition-colors"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function ToastContainer() {
|
|
const toasts = useToastStore((state) => state.toasts)
|
|
const removeToast = useToastStore((state) => state.removeToast)
|
|
|
|
if (toasts.length === 0) return null
|
|
|
|
return (
|
|
<div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none">
|
|
{toasts.map((toast) => (
|
|
<div key={toast.id} className="pointer-events-auto">
|
|
<ToastItem toast={toast} onRemove={removeToast} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|