82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
// src/NotificationContext.tsx
|
|
|
|
import React, { createContext, useContext, useState } from 'react';
|
|
|
|
export type NotificationType = 'success' | 'error';
|
|
|
|
interface NotificationContextType {
|
|
notify: (message: string, type: NotificationType) => void;
|
|
}
|
|
|
|
const NotificationContext = createContext<NotificationContextType | undefined>(undefined);
|
|
|
|
export const NotificationProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const [notification, setNotification] = useState<string | null>(null);
|
|
const [notificationType, setNotificationType] = useState<NotificationType | null>(null);
|
|
|
|
const notify = (message: string, type: NotificationType) => {
|
|
setNotification(message);
|
|
setNotificationType(type);
|
|
|
|
// Automatically dismiss notification after 3 seconds
|
|
setTimeout(() => {
|
|
setNotification(null);
|
|
setNotificationType(null);
|
|
}, 3000);
|
|
};
|
|
|
|
return (
|
|
<NotificationContext.Provider value={{ notify }}>
|
|
{children}
|
|
{notification && (
|
|
<Notification message={notification} onClose={() => setNotification(null)} type={notificationType!} />
|
|
)}
|
|
</NotificationContext.Provider>
|
|
);
|
|
};
|
|
|
|
export const useNotification = () => {
|
|
const context = useContext(NotificationContext);
|
|
if (!context) {
|
|
throw new Error('useNotification must be used within a NotificationProvider');
|
|
}
|
|
return context.notify;
|
|
};
|
|
|
|
|
|
interface NotificationProps {
|
|
message: string;
|
|
onClose: () => void;
|
|
type: 'success' | 'error'; // Define notification types
|
|
}
|
|
|
|
// Notification Component
|
|
const Notification: React.FC<NotificationProps> = ({ message, onClose, type }) => {
|
|
return (
|
|
<div style={{ ...styles.notification, backgroundColor: type === 'success' ? '#4caf50' : '#f44336' }}>
|
|
<p>{message}</p>
|
|
<button onClick={onClose} style={styles.closeButton}>X</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Notification styles remain the same...
|
|
const styles: { [key: string]: React.CSSProperties } = {
|
|
notification: {
|
|
position: 'fixed',
|
|
top: '20px',
|
|
right: '20px',
|
|
color: 'white',
|
|
padding: '15px',
|
|
borderRadius: '5px',
|
|
zIndex: 1000,
|
|
},
|
|
closeButton: {
|
|
background: 'transparent',
|
|
border: 'none',
|
|
color: 'white',
|
|
cursor: 'pointer',
|
|
marginLeft: '10px',
|
|
},
|
|
};
|