alert system component

nexlabsweb3 · Nov 22, 2024 · 24337db · 24337db
1 parent b8b57b8
commit 24337db
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 0 deletions.
diff --git a/frontend/src/app/components/Alert.tsx b/frontend/src/app/components/Alert.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { AlertType } from '../../hooks/useAlert';
+import { useAlert } from '../../hooks/useAlert';
+
+const Alert: React.FC = () => {
+  const { alert } = useAlert();
+
+  if (!alert.isVisible) return null;
+
+  const alertStyles: Record<AlertType, string> = {
+    success: 'bg-green-100 border-green-500 text-green-700',
+    error: 'bg-red-100 border-red-500 text-red-700',
+    warning: 'bg-yellow-100 border-yellow-500 text-yellow-700',
+    info: 'bg-blue-100 border-blue-500 text-blue-700',
+  };
+
+  return (
+    <div
+      className={`fixed top-4 right-4 p-4 rounded border-l-4 shadow-md transition-opacity ${
+        alertStyles[alert.type]
+      }`}
+      role="alert"
+    >
+      {alert.title && <p className="font-semibold">{alert.title}</p>}
+      <p className="font-medium">{alert.message}</p>
+    </div>
+  );
+};
+
+export default Alert;
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -5,6 +5,7 @@ import './globals.css';
 import { bowlby_one, poppins, roboto } from './fonts';
 import Footer from './components/Footer';
 import NavBar from './components/Navbar';
+import Alert from './components/Alert';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -18,6 +19,7 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
+
   return (
     <html lang="en">
       <body
@@ -28,6 +30,7 @@ export default function RootLayout({
           <NavBar />
           {children}
 
+          <Alert  />
           <Footer />
         </StarknetProvider>
       </body>

diff --git a/frontend/src/hooks/useAlert.tsx b/frontend/src/hooks/useAlert.tsx
@@ -0,0 +1,80 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * Alert types supported by the useAlert hook
+ * @typedef {'success' | 'error' | 'warning' | 'info'} AlertType
+ */
+export type AlertType = 'success' | 'error' | 'warning' | 'info';
+
+/**
+ * State interface for the alert
+ * @interface AlertState
+ */
+interface AlertState {
+  message: string;
+  title?: string;
+  type: AlertType;
+  isVisible: boolean;
+}
+
+/**
+ * Custom hook for managing alert notifications in React applications.
+ * 
+ * @returns {{
+*   alert: AlertState,
+*   showAlert: (type: AlertType, message: string) => void
+* }}
+* 
+* @example
+* // Basic usage
+* function MyComponent() {
+*   const { alert, showAlert } = useAlert();
+*   
+*   return (
+*     <>
+*       <Alert {...alert} />
+*       <button onClick={() => showAlert('success', 'It worked!', 10000)}>
+*         Show Success
+*       </button>
+*     </>
+*   );
+* }
+* 
+* @example
+* // All alert types
+* showAlert('success', 'Operation completed successfully', 10000);
+* showAlert('error', 'An error occurred', 10000);
+* showAlert('warning', 'Please be careful', 10000);
+* showAlert('info', 'Just so you know...');
+*/
+export const useAlert = () => {
+  const [alert, setAlert] = useState<AlertState>({
+    message: '',
+    type: 'info',
+    isVisible: false,
+  });
+
+  const showAlert = useCallback(
+    (type: AlertType, message: string, title?: string, duration: number = 5000) => {
+      setAlert({
+        type,
+        title,
+        message,
+        isVisible: true,
+      });
+
+    // Auto-hide after 5 seconds
+    setTimeout(() => {
+        setAlert((prev) => ({ ...prev, isVisible: false }));
+      }, duration);
+    },
+    []
+  );
+
+  return {
+    alert,
+    showAlert,
+  };
+};
+
+export default useAlert;