94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, createContext, useContext, useCallback } from 'react';
|
|
|
|
interface Toast {
|
|
id: string;
|
|
message: string;
|
|
type: 'success' | 'error' | 'info';
|
|
}
|
|
|
|
interface ToastContextType {
|
|
toast: (message: string, type?: Toast['type']) => void;
|
|
}
|
|
|
|
const ToastContext = createContext<ToastContextType>({ toast: () => {} });
|
|
|
|
export function useToast() {
|
|
return useContext(ToastContext);
|
|
}
|
|
|
|
export function ToastProvider({ children }: { children: React.ReactNode }) {
|
|
const [toasts, setToasts] = useState<Toast[]>([]);
|
|
|
|
const addToast = useCallback((message: string, type: Toast['type'] = 'info') => {
|
|
const id = crypto.randomUUID();
|
|
setToasts((prev) => [...prev, { id, message, type }]);
|
|
}, []);
|
|
|
|
const removeToast = useCallback((id: string) => {
|
|
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
}, []);
|
|
|
|
return (
|
|
<ToastContext.Provider value={{ toast: addToast }}>
|
|
{children}
|
|
<div className="fixed bottom-4 right-4 z-50 space-y-2" aria-live="polite">
|
|
{toasts.map((t) => (
|
|
<ToastItem key={t.id} toast={t} onDismiss={() => removeToast(t.id)} />
|
|
))}
|
|
</div>
|
|
</ToastContext.Provider>
|
|
);
|
|
}
|
|
|
|
function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }) {
|
|
useEffect(() => {
|
|
const timer = setTimeout(onDismiss, 4000);
|
|
return () => clearTimeout(timer);
|
|
}, [onDismiss]);
|
|
|
|
const styles: Record<string, string> = {
|
|
success: 'bg-emerald-600',
|
|
error: 'bg-red-600',
|
|
info: 'bg-surface-800',
|
|
};
|
|
|
|
const icons: Record<string, React.ReactNode> = {
|
|
success: (
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
|
<path d="M4 8.5l3 3 5-6" />
|
|
</svg>
|
|
),
|
|
error: (
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
|
<circle cx="8" cy="8" r="6" /><path d="M8 5v3M8 10v.5" />
|
|
</svg>
|
|
),
|
|
info: (
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
|
<circle cx="8" cy="8" r="6" /><path d="M8 7v4M8 5v.5" />
|
|
</svg>
|
|
),
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`${styles[toast.type]} text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 text-sm font-medium min-w-[280px] animate-in slide-in-from-right duration-300`}
|
|
role="alert"
|
|
>
|
|
{icons[toast.type]}
|
|
<span className="flex-1">{toast.message}</span>
|
|
<button
|
|
onClick={onDismiss}
|
|
className="text-white/70 hover:text-white cursor-pointer"
|
|
aria-label="Dismiss"
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
|
<path d="M3 3l8 8M11 3l-8 8" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|