60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { createContext, useContext, useState, useCallback } from 'react';
|
|
import ToastNotification, { Toast } from './ToastNotification';
|
|
|
|
interface ToastContextType {
|
|
showToast: (type: Toast['type'], title: string, message?: string) => void;
|
|
success: (title: string, message?: string) => void;
|
|
error: (title: string, message?: string) => void;
|
|
info: (title: string, message?: string) => void;
|
|
}
|
|
|
|
const ToastContext = createContext<ToastContextType | undefined>(undefined);
|
|
|
|
export function ToastProvider({ children }: { children: React.ReactNode }) {
|
|
const [toasts, setToasts] = useState<Toast[]>([]);
|
|
|
|
const showToast = useCallback((type: Toast['type'], title: string, message?: string) => {
|
|
const id = Date.now().toString();
|
|
setToasts(prev => [...prev, { id, type, title, message }]);
|
|
}, []);
|
|
|
|
const success = useCallback((title: string, message?: string) => {
|
|
showToast('success', title, message);
|
|
}, [showToast]);
|
|
|
|
const error = useCallback((title: string, message?: string) => {
|
|
showToast('error', title, message);
|
|
}, [showToast]);
|
|
|
|
const info = useCallback((title: string, message?: string) => {
|
|
showToast('info', title, message);
|
|
}, [showToast]);
|
|
|
|
const removeToast = useCallback((id: string) => {
|
|
setToasts(prev => prev.filter(toast => toast.id !== id));
|
|
}, []);
|
|
|
|
return (
|
|
<ToastContext.Provider value={{ showToast, success, error, info }}>
|
|
{children}
|
|
<div className="fixed inset-0 z-50 flex items-end justify-end p-4 sm:p-6 pointer-events-none">
|
|
<div className="flex w-full flex-col items-end space-y-4 sm:items-end">
|
|
{toasts.map(toast => (
|
|
<ToastNotification key={toast.id} toast={toast} onClose={removeToast} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</ToastContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useToast() {
|
|
const context = useContext(ToastContext);
|
|
if (!context) {
|
|
throw new Error('useToast must be used within ToastProvider');
|
|
}
|
|
return context;
|
|
}
|