hosting: fix notification on reserve

frontend/src/NotificationContext.tsx

@@ -0,0 +1,81 @@
+// src/NotificationContext.tsx
+
+import React, { createContext, useContext, useState } from 'react';
+
+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',
+  },
+};