Notification System

Interactive demo of all notification types available throughout the website

Notification System Demo

Click the buttons below to see different notification types in action

Usage Examples:

• Success: Form submissions, saved changes, completed actions

• Error: Failed API calls, validation errors, system issues

• Info: Helpful tips, feature announcements, general information

• Warning: Session timeouts, unsaved changes, important notices

• Promise: Async operations with loading, success, and error states

Code Example:

import { useNotification } from "@/hooks/useNotification";

function MyComponent() {
  const notification = useNotification();

  const handleSubmit = async () => {
    try {
      await submitForm();
      notification.success(
        "Form Submitted!",
        "We'll contact you within 24 hours."
      );
    } catch (error) {
      notification.error(
        "Submission Failed",
        "Please try again later."
      );
    }
  };

  return <Button onClick={handleSubmit}>Submit</Button>;
}