Toast.jsx

Go to the documentation of this file.

import { useEffect } from 'react';
import './Toast.css';
 
export default function Toast({ message, type = 'info', duration = 5000, onClose }) {
    useEffect(() => {
        if (duration > 0) {
            const timer = setTimeout(() => {
                onClose();
            }, duration);
            return () => clearTimeout(timer);
        }
    }, [duration, onClose]);
 
    const getIcon = () => {
        switch (type) {
            case 'success':
                return 'check_circle';
            case 'error':
                return 'error';
            case 'warning':
                return 'warning';
            case 'info':
            default:
                return 'info';
        }
    };
 
    return (
        <div className={`toast toast-${type}`}>
            <span className="material-symbols-outlined toast-icon">{getIcon()}</span>
            <span className="toast-message">{message}</span>
            <button className="toast-close" onClick={onClose}>
                <span className="material-symbols-outlined">close</span>
            </button>
        </div>
    );
}