React Alert Component with Typescript

This challenge asks you to build a reusable alert component in React using Typescript. Alert components are essential for providing users with feedback on actions, errors, or important information within an application, enhancing the user experience. This component should be configurable with different alert types (e.g., success, error, warning, info) and a customizable message.

Problem Description

You need to create a Alert component that displays a message with a specified type. The component should accept a type prop (string) and a message prop (string) as input. The type prop determines the visual style of the alert (e.g., background color, icon). The message prop is the text to be displayed within the alert.

Key Requirements:

• Typescript: The component must be written in Typescript, ensuring type safety.
• Props: The component must accept type (string) and message (string) props.
• Visual Styling: The component should visually differentiate between different alert types (success, error, warning, info). Use distinct background colors and icons for each type. You can use CSS classes or inline styles for styling.
• Reusability: The component should be easily reusable throughout your application.
• Clear Display: The message should be clearly displayed within the alert.

Expected Behavior:

When the component is rendered with a specific type and message, it should display a styled alert box with the provided message. The styling should correspond to the specified alert type.

Edge Cases to Consider:

• Invalid Type: Handle cases where an invalid type is provided (e.g., a type that doesn't have a defined style). You could display a default style or an error message.
• Empty Message: Handle cases where the message prop is empty or null. Consider displaying a placeholder message or simply not rendering the alert.
• Accessibility: Ensure the component is accessible by using appropriate ARIA attributes (e.g., role="alert") and ensuring sufficient color contrast.

Examples

Example 1:

Input: <Alert type="success" message="Operation successful!" />
Output: A green alert box displaying "Operation successful!".
Explanation: The component renders a success alert with a green background and a success icon.

Example 2:

Input: <Alert type="error" message="An error occurred. Please try again." />
Output: A red alert box displaying "An error occurred. Please try again.".
Explanation: The component renders an error alert with a red background and an error icon.

Example 3:

Input: <Alert type="warning" message="This action cannot be undone." />
Output: A yellow alert box displaying "This action cannot be undone.".
Explanation: The component renders a warning alert with a yellow background and a warning icon.

Example 4:

Input: <Alert type="info" message="Please read the instructions carefully." />
Output: A blue alert box displaying "Please read the instructions carefully.".
Explanation: The component renders an info alert with a blue background and an info icon.

Constraints

• Styling: You can use CSS classes or inline styles for styling. Keep the styling relatively simple for this challenge.
• Typescript: Strict type checking is expected.
• Component Structure: The component should be a functional component using React Hooks.
• Performance: The component should render efficiently. Avoid unnecessary re-renders.

Notes

• Consider using a CSS framework (like Bootstrap or Material UI) if you are familiar with one, but it's not required. You can also create your own CSS classes.
• Think about how to handle different alert types in a maintainable way. A switch statement or object lookup might be useful.
• Focus on creating a clean, reusable, and well-typed component.
• Accessibility is important. Consider how users with disabilities will interact with your component.