95 lines
3.0 KiB
TypeScript
95 lines
3.0 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { CheckCircle, XCircle, Info, AlertCircle, X } from 'lucide-react'
|
|
import clsx from 'clsx'
|
|
|
|
export interface Toast {
|
|
id: string
|
|
type: 'success' | 'error' | 'info' | 'warning'
|
|
title: string
|
|
message?: string
|
|
duration?: number
|
|
}
|
|
|
|
// Global toast state (in production, use Zustand or Context)
|
|
let toastListeners: ((toasts: Toast[]) => void)[] = []
|
|
let toastList: Toast[] = []
|
|
|
|
export const toast = {
|
|
success: (title: string, message?: string) => addToast('success', title, message),
|
|
error: (title: string, message?: string) => addToast('error', title, message),
|
|
info: (title: string, message?: string) => addToast('info', title, message),
|
|
warning: (title: string, message?: string) => addToast('warning', title, message),
|
|
}
|
|
|
|
function addToast(type: Toast['type'], title: string, message?: string, duration = 5000) {
|
|
const id = Date.now().toString()
|
|
const newToast: Toast = { id, type, title, message, duration }
|
|
toastList = [...toastList, newToast]
|
|
toastListeners.forEach(listener => listener(toastList))
|
|
|
|
// Auto-remove after duration
|
|
setTimeout(() => {
|
|
removeToast(id)
|
|
}, duration)
|
|
}
|
|
|
|
function removeToast(id: string) {
|
|
toastList = toastList.filter(t => t.id !== id)
|
|
toastListeners.forEach(listener => listener(toastList))
|
|
}
|
|
|
|
export function ToastContainer() {
|
|
const [toasts, setToasts] = useState<Toast[]>([])
|
|
|
|
useEffect(() => {
|
|
const listener = (newToasts: Toast[]) => setToasts(newToasts)
|
|
toastListeners.push(listener)
|
|
return () => {
|
|
toastListeners = toastListeners.filter(l => l !== listener)
|
|
}
|
|
}, [])
|
|
|
|
const icons = {
|
|
success: <CheckCircle className="h-5 w-5 text-pick" />,
|
|
error: <XCircle className="h-5 w-5 text-reject" />,
|
|
info: <Info className="h-5 w-5 text-primary" />,
|
|
warning: <AlertCircle className="h-5 w-5 text-star" />,
|
|
}
|
|
|
|
const colors = {
|
|
success: 'border-pick bg-pick/10',
|
|
error: 'border-reject bg-reject/10',
|
|
info: 'border-primary bg-primary/10',
|
|
warning: 'border-star bg-star/10',
|
|
}
|
|
|
|
return (
|
|
<div className="pointer-events-none fixed bottom-4 left-4 z-50 flex flex-col gap-2">
|
|
{toasts.map((toast) => (
|
|
<div
|
|
key={toast.id}
|
|
className={clsx(
|
|
'pointer-events-auto flex items-start gap-3 rounded-lg border p-3 shadow-lg backdrop-blur-sm transition-all duration-300',
|
|
'animate-slide-up',
|
|
colors[toast.type]
|
|
)}
|
|
style={{ minWidth: '300px', maxWidth: '400px' }}
|
|
>
|
|
{icons[toast.type]}
|
|
<div className="flex-1">
|
|
<div className="font-medium text-text">{toast.title}</div>
|
|
{toast.message && (
|
|
<div className="mt-0.5 text-sm text-text-muted">{toast.message}</div>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={() => removeToast(toast.id)}
|
|
className="pointer-events-auto rounded p-0.5 text-text-muted hover:bg-surface-offset hover:text-text"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
} |