add toast

frontend/src/App.tsx

@@ -1,6 +1,8 @@
 import { Routes, Route } from 'react-router-dom'
 import { ModalProvider } from './context/modals/useModal'
 import { ModalRoot } from './context/modals/ModalRoot'
+import { ToastProvider } from './context/toasts/useToast'
+import { ToastRoot } from './context/toasts/ToastRoot'
 import Cart from './pages/Cart'
 import { Navbar } from './components/Navbar'
 import { Home } from './pages/Home'
@@ -11,22 +13,25 @@ import { Orders } from './pages/Orders'
 
 const App = () => {
   return (
-    <ModalProvider>
+    <ToastProvider>
-      <div className="min-h-screen bg-gray-900 text-gray-100">
+      <ModalProvider>
-        <Navbar />
+        <div className="min-h-screen bg-gray-900 text-gray-100">
-        <main className="flex-1 p-8 max-w-7xl mx-auto w-full">
+          <Navbar />
-          <Routes>
+          <main className="flex-1 p-8 max-w-7xl mx-auto w-full">
-            <Route path="/" element={<Home />} />
+            <Routes>
-            <Route path="/products" element={<Products />} />
+              <Route path="/" element={<Home />} />
-            <Route path="/login" element={<Login />} />
+              <Route path="/products" element={<Products />} />
-            <Route path="/register" element={<Register />} />
+              <Route path="/login" element={<Login />} />
-            <Route path="/cart" element={<Cart />} />
+              <Route path="/register" element={<Register />} />
-            <Route path="/orders" element={<Orders />} />
+              <Route path="/cart" element={<Cart />} />
-          </Routes>
+              <Route path="/orders" element={<Orders />} />
-        </main>
+            </Routes>
-        <ModalRoot />
+          </main>
-      </div>
+          <ToastRoot />
-    </ModalProvider>
+          <ModalRoot />
+        </div>
+      </ModalProvider>
+    </ToastProvider>
   )
 }
 

frontend/src/context/toasts/ToastExample.tsx

@@ -0,0 +1,92 @@
+import { useToast } from './useToast';
+
+export const ToastExample = () => {
+  const { addNotification } = useToast();
+
+  const showSuccess = () => {
+    addNotification({
+      type: 'success',
+      title: 'Success!',
+      message: 'Operation completed successfully.',
+      duration: 3000,
+    });
+  };
+
+  const showError = () => {
+    addNotification({
+      type: 'error',
+      title: 'Error!',
+      message: 'Something went wrong. Please try again.',
+      duration: 5000,
+    });
+  };
+
+  const showWarning = () => {
+    addNotification({
+      type: 'warning',
+      title: 'Warning',
+      message: 'Please review your input before proceeding.',
+      duration: 4000,
+    });
+  };
+
+  const showInfo = () => {
+    addNotification({
+      type: 'info',
+      title: 'Information',
+      message: 'This is an informational message.',
+      duration: 3000,
+    });
+  };
+
+  const showSticky = () => {
+    addNotification({
+      type: 'success',
+      title: 'Sticky Notification',
+      message: 'This will stay until you close it!',
+      duration: 0, // 0 means no auto-dismiss
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-xl font-semibold text-white mb-4">Toast System Examples</h3>
+      <p className="text-gray-400 mb-6">
+        Click the buttons below to see different toast notifications in action. The toast uses React Context for state management.
+      </p>
+      
+      <div className="flex flex-wrap gap-3">
+        <button
+          onClick={showSuccess}
+          className="px-4 py-2 text-white bg-green-600 rounded hover:bg-green-700 transition-colors"
+        >
+          Success Toast
+        </button>
+        <button
+          onClick={showError}
+          className="px-4 py-2 text-white bg-red-600 rounded hover:bg-red-700 transition-colors"
+        >
+          Error Toast
+        </button>
+        <button
+          onClick={showWarning}
+          className="px-4 py-2 text-white bg-yellow-600 rounded hover:bg-yellow-700 transition-colors"
+        >
+          Warning Toast
+        </button>
+        <button
+          onClick={showInfo}
+          className="px-4 py-2 text-white bg-blue-600 rounded hover:bg-blue-700 transition-colors"
+        >
+          Info Toast
+        </button>
+        <button
+          onClick={showSticky}
+          className="px-4 py-2 text-white bg-purple-600 rounded hover:bg-purple-700 transition-colors"
+        >
+          Sticky Toast
+        </button>
+      </div>
+    </div>
+  );
+};

frontend/src/context/toasts/ToastRoot.tsx

@@ -0,0 +1,71 @@
+import { createPortal } from 'react-dom';
+import { useToast, NotificationType } from './useToast';
+
+// Simple Icons (No external lib)
+const Icons = {
+  success: (
+    <svg className="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+    </svg>
+  ),
+  error: (
+    <svg className="w-5 h-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  ),
+  warning: (
+    <svg className="w-5 h-5 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+    </svg>
+  ),
+  info: (
+    <svg className="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+  ),
+};
+
+const getColors = (type: NotificationType) => {
+  switch (type) {
+    case 'success': return 'bg-white border-l-4 border-green-500';
+    case 'error': return 'bg-white border-l-4 border-red-500';
+    case 'warning': return 'bg-white border-l-4 border-yellow-500';
+    case 'info': return 'bg-white border-l-4 border-blue-500';
+  }
+};
+
+export const ToastRoot = () => {
+  const { toasts, removeNotification } = useToast();
+
+  if (toasts.length === 0) return null;
+
+  return createPortal(
+    <div className="fixed top-4 right-4 z-[60] flex flex-col gap-3 w-full max-w-sm pointer-events-none">
+      {toasts.map((toast) => (
+        <div
+          key={toast.id}
+          className={`pointer-events-auto transform transition-all duration-300 ease-in-out hover:scale-[1.02] shadow-lg rounded-md p-4 flex items-start gap-3 ${getColors(toast.type)}`}
+          role="alert"
+        >
+          <div className="flex-shrink-0 mt-0.5">{Icons[toast.type]}</div>
+          <div className="flex-1">
+            <h4 className="text-sm font-semibold text-gray-900">{toast.title}</h4>
+            {toast.message && (
+              <p className="text-sm text-gray-600 mt-1">{toast.message}</p>
+            )}
+          </div>
+          <button
+            onClick={() => removeNotification(toast.id)}
+            className="text-gray-400 hover:text-gray-600 focus:outline-none"
+            aria-label="Close notification"
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      ))}
+    </div>,
+    document.body
+  );
+};

frontend/src/context/toasts/index.ts

@@ -0,0 +1,3 @@
+export { ToastProvider, useToast } from './useToast';
+export type { NotificationType, ToastNotification } from './useToast';
+export { ToastRoot } from './ToastRoot';

frontend/src/context/toasts/useToast.tsx

@@ -0,0 +1,62 @@
+import { createContext, useContext, useState, useCallback, ReactNode, FC } from 'react';
+
+export type NotificationType = 'success' | 'error' | 'warning' | 'info';
+
+export interface ToastNotification {
+  id: string;
+  type: NotificationType;
+  title: string;
+  message?: string;
+  duration?: number; // ms, default 5000
+}
+
+interface ToastContextType {
+  toasts: ToastNotification[];
+  addNotification: (toast: Omit<ToastNotification, 'id'>) => void;
+  removeNotification: (id: string) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+interface ToastProviderProps {
+  children: ReactNode;
+}
+
+export const ToastProvider: FC<ToastProviderProps> = ({ children }) => {
+  const [toasts, setToasts] = useState<ToastNotification[]>([]);
+
+  const addNotification = useCallback((toast: Omit<ToastNotification, 'id'>) => {
+    const id = Math.random().toString(36).substr(2, 9);
+    const newToast: ToastNotification = {
+      ...toast,
+      id,
+      duration: toast.duration ?? 5000, // Default 5s
+    };
+
+    setToasts((prev) => [...prev, newToast]);
+
+    // Auto-remove after duration
+    const duration = newToast.duration ?? 5000;
+    if (duration > 0) {
+      setTimeout(() => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+      }, duration);
+    }
+  }, []);
+
+  const removeNotification = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ toasts, addNotification, removeNotification }}>
+      {children}
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) throw new Error('useToast must be used within a ToastProvider');
+  return context;
+};

frontend/src/pages/Home.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom'
 import { ModalExample } from '../context/modals/ModalExample'
+import { ToastExample } from '../context/toasts/ToastExample'
 
 export function Home() {
   return (
@@ -41,6 +42,14 @@ export function Home() {
         </p>
         <ModalExample />
       </div>
+
+      <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <h2 className="text-2xl font-semibold text-white mb-4">Toast System Demo</h2>
+        <p className="text-gray-400 mb-6">
+          Test our toast notification system with this interactive example. The toast uses React Context for state management.
+        </p>
+        <ToastExample />
+      </div>
     </div>
   )
 }