Toasts And Notifications

Toasts And Notifications

Toasts are the small little notification messages that popup on front-end applications to notify the user of some current actions that have happened. Toasts are essential and help in notifying the user of success and error events primarily. In this task, you are required to code a custom Toast component.

Tasks

1. Create a standalone Toasts component that is responsible for showing notifications on the page.
2. The Toasts component should take in a configuration of various parameters.
3. A toast should contain A
   1. Title - To display the notification content
   2. Icon - Display relevant icons
   3. Position - Where the notification should be shown on the page.
4. All the configurations are editable and are present at the center of the page, as shown in the illustration above.
5. A Toast should have a close icon - which when pressed should remove the toast from the DOM.
6. If there are multiple toasts, they're neatly stacked on top of each other.
7. BONUS Take in a duration parameter, after the specific duration has passed, the notification should be removed automatically.