KnowledgeBase_frontend/src/components/Snackbar.jsx

import React, { useEffect } from 'react';
import SvgIcon from './SvgIcon';

const Snackbar = ({ type = 'primary', message, duration = 3000, onClose }) => {
    if (!message) return null;

    useEffect(() => {
        if (message) {
            const timer = setTimeout(() => {
                if (onClose) onClose();
            }, duration);
            return () => clearTimeout(timer);
        }
    }, [duration, onClose]);

    const icons = {
        success: 'check-circle-fill',
        primary: 'info-fill',
        warning: 'exclamation-triangle-fill',
        danger: 'exclamation-triangle-fill',
    };

    return (
        <>
            <div
                className={`snackbar alert alert-${type} d-flex align-items-center justify-content-between position-fixed top-10 start-50 translate-middle w-50 alert-dismissible z-2 gap-2`}
                role='alert'
            >
                <SvgIcon className={icons[type]} />
                <div className='flex-fill'>{message}</div>
                <button
                    type='button'
                    className='btn-close flex-end'
                    data-bs-dismiss='alert'
                    aria-label='Close'
                ></button>
            </div>
        </>
    );
};

export default Snackbar;