The toast notification is finished

So i finished it, it is a component that u adds in the code that u wants to use. I added 2 icons, 1 for infos and another for warnings.

What i used and did

The element that holds it all is an dialog, the icons are svg, the text is a span and the element that shows the time left is an progress.
To update the time left i used an setInterval that runs at a 10ms delay and deduce 0.01 of the dialog value, so it will be smooth to see. Also there is an if inside that destroy the element and clear the interval when the value of the dialog reaches zero or less (In the past devlog i said about not using an if, but considering how low the cost for an if in that time is i decided to use it anyway).
The function that creates the toast receives some params that will let it be customized by whoever is calling it:

const icons = Object.freeze({ 
INFO: infoIcon(), 
WARNING: warningIcon()
});

function createToast({ message, time = 5, styles, icon = icons.INFO })
// the `message` is the displayed message
// the `time` is the time until close
// the `styles` is custom css styles for the element, it uses the dictionary format {}
// the `icon` is the svg icon

What else?

I will apply it in some elements and post about. See you later!