Reusable Toast

Description

In this problem, you need to implement a "toast" notification feature that provides brief feedback to users in the form of a popup. The toast should:

• Accept a message (string)
• Accept a type (success, error, or info)
• Accept a duration (milliseconds)

Toasts should:

• Appear at the top or bottom of the screen
• Automatically disappear after the specified time
• Allow multiple toasts to be displayed simultaneously
• Show different styles depending on the type (color-coded: green for success, red for error, blue for info)

Toast Container:

• Show Success - On clicking this button a success toast appears.
• Show Error - On clicking this button an error toast appears.
• Show Info - On clicking this button an info toast appears.

Example Inputs & Outputs

Input: addToast("Data saved successfully!", "success", 3000)
Output: Toast with green background appears for 3 seconds

Input: addToast("Error saving data!", "error", 5000)
Output: Toast with red background appears for 5 seconds

Input: addToast("Information loaded", "info", 4000)
Output: Toast with blue background appears for 4 seconds

Constraints & Edge Cases

• Each toast should auto-dismiss after its specified duration.
• Support showing multiple toasts at once.
• Each toast should be uniquely identifiable for removal.
• The component must support easy customization of message, duration, and type.
• Ensure toasts don’t overlap visually in a confusing way.
• Make sure to use inline css.

Reference UI