Notification Component

Notification Examples

Usage Examples

Basic Notification Usage

"use client";

import { NotificationSystem, useNotification } from "@/components/notification";

function MyComponent() {
  const { showNotification } = useNotification();

  const handleClick = () => {
    showNotification({
      message: "Success",
      description: "Action completed successfully",
      type: "success",
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Show Notification</button>
    </div>
  );
}

export default function Page() {
  return (
    <NotificationSystem>
      <MyComponent />
    </NotificationSystem>
  );
}

Notification with Different Types

showNotification({
  message: "Information",
  description: "This is an info notification",
  type: "info",
});

showNotification({
  message: "Success",
  description: "This is a success notification",
  type: "success",
});

showNotification({
  message: "Warning",
  description: "This is a warning notification",
  type: "warning",
});

showNotification({
  message: "Error",
  description: "This is an error notification",
  type: "error",
});

Persistent Notification

showNotification({
  message: "Persistent",
  description: "This notification will stay until closed",
  type: "info",
  duration: 0, // Persistent - won't auto-close
});