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
|
'use client';
import { createContext, useContext, useState, ReactNode } from 'react';
import { Notification, NotificationType } from './Notification';
type NotificationData = {
id: string;
type: NotificationType;
message: string;
duration?: number;
};
interface NotificationContextType {
showNotification: (type: NotificationType, message: string, duration?: number) => void;
hideNotification: (id: string) => void;
}
const NotificationContext = createContext<NotificationContextType | undefined>(undefined);
export function NotificationProvider({ children }: { children: ReactNode }) {
const [notifications, setNotifications] = useState<NotificationData[]>([]);
const showNotification = (type: NotificationType, message: string, duration?: number) => {
const id = Math.random().toString(36).substring(2, 9);
setNotifications(prev => [...prev, { id, type, message, duration }]);
return id;
};
const hideNotification = (id: string) => {
setNotifications(prev => prev.filter(notification => notification.id !== id));
};
return (
<NotificationContext.Provider value={{ showNotification, hideNotification }}>
{children}
{notifications.map(notification => (
<Notification
key={notification.id}
type={notification.type}
message={notification.message}
duration={notification.duration}
onClose={() => hideNotification(notification.id)}
/>
))}
</NotificationContext.Provider>
);
}
export function useNotification() {
const context = useContext(NotificationContext);
if (context === undefined) {
throw new Error('useNotification must be used within a NotificationProvider');
}
return context;
}
|
