Notification

Notification.tsx

import React, { useState } from "react";

type NotificationType = "success" | "error" | "warning" | "info";

interface Notification {
  id: number;
  type: NotificationType;
  message: string;
}

interface NotificationsProps {
  notifications: Notification[];
  onClose: (id: number) => void;
}

const Notifications: React.FC<NotificationsProps> = ({
  notifications,
  onClose,
}) => {
  const [closedNotifications, setClosedNotifications] = useState<number[]>(
    []
  );

  const handleClose = (id: number) => {
    setClosedNotifications([...closedNotifications, id]);
    onClose(id);
  };

  return (
    <div className="notifications">
      {notifications.map((notification) => (
        !closedNotifications.includes(notification.id) && (
          <div key={notification.id} className={`notification ${notification.type}`}>
            <span className="close-btn" onClick={() => handleClose(notification.id)}>
              &times;
            </span>
            {notification.message}
          </div>
        )
      ))}
    </div>
  );
};

export default Notifications;

Notification.module.css

.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.notification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 300px;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.notification .message {
  margin-right: 10px;
}

.notification .close-btn {
  cursor: pointer;
  font-size: 20px;
  color: #ddd;
}

Related Components