Alert

Alert.tsx

import React, { useState } from 'react';

type AlertType = 'success' | 'info' | 'warning' | 'error';

interface Alert {
  id: number;
  type: AlertType;
  message: string;
}

interface AlertProps {
  alert: Alert;
  onClose: (id: number) => void;
}

const AlertComponent: React.FC<AlertProps> = ({ alert, onClose }) => {
  const [closed, setClosed] = useState(false);

  const handleClose = () => {
    setClosed(true);
    onClose(alert.id);
  };

  return (
    <div className={`alert ${alert.type} ${closed ? 'closed' : ''}`}>
      <span className="close-btn" onClick={handleClose}>
        &times;
      </span>
      {alert.message}
    </div>
  );
};

interface AlertsProps {
  alerts: Alert[];
  onClose: (id: number) => void;
}

const Alerts: React.FC<AlertsProps> = ({ alerts, onClose }) => {
  return (
    <div className="alerts">
      {alerts.map(alert => (
        <AlertComponent key={alert.id} alert={alert} onClose={onClose} />
      ))}
    </div>
  );
};

export default Alerts;

Alert.module.css

.alert {
  position: relative;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 24px;
}

.alert.success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert.info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.alert.warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.alert.error {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert.closed {
  display: none;
}

.close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
}

Related Components