@servosinformatica/resources/src/components/ShowError/ShowError.js

Resources to Servos Informatica's apps

const ShowError = (message) => {
    const styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    // Define os @keyframes
    styleElement.innerHTML = `
        @keyframes snackIn  {
            from { bottom: 0;    opacity: 0; }
            to   { bottom: 30px; opacity: 1; }
        }
        @keyframes snackOut {          
            from { bottom: 30px; opacity: 1; }
            to   { bottom: 0;    opacity: 0; }
        }
    `;
    document.head.appendChild(styleElement);

    // Cria novo snackbar
    const existing = document.getElementById('global-snackbar');
    if (existing) existing.remove();

    const snackbar = document.createElement('div');
    snackbar.id = 'global-snackbar';
    snackbar.innerHTML = message;
    snackbar.style.minWidth = '210px';
    snackbar.style.backgroundColor = '#630d03';
    snackbar.style.color = 'white';
    snackbar.style.textAlign = 'center';
    snackbar.style.padding = '16px';
    snackbar.style.position = 'fixed';
    snackbar.style.zIndex = '9999'
    snackbar.style.bottom = '30px';
    snackbar.style.left = '50%';
    snackbar.style.fontSize = '0.9em';
    snackbar.style.boxShadow = '0 3px 5px rgba(0,0,0,0.2)';
    snackbar.style.visibility = 'visible';
    snackbar.style.transform = 'translateX(-50%)';
    snackbar.style.borderRadius = '4px';
    snackbar.style.animation = 'snackIn 0.5s, snackOut 0.5s 3.5s';
    document.body.appendChild(snackbar);

    setTimeout(()=> {
        snackbar.style.visibility = 'hidden';
    }, 4000);
};

export default ShowError;