Create a Reusable Alert Component in React with TypeScript

This challenge involves building a fundamental UI component: an alert. Alert components are crucial for providing feedback to users, such as success messages, error notifications, or warnings. A well-designed, reusable alert component will significantly improve the user experience of any React application.

Problem Description

Your task is to create a functional and reusable Alert component in React using TypeScript. This component should be capable of displaying different types of messages with distinct visual styles.

Key Requirements:

1. Component Structure: The component should accept message and type as props.
2. Message Display: It must render the provided message string.
3. Type-Based Styling: The type prop should control the visual appearance of the alert. Common types include success, error, warning, and info. Each type should have a distinct background color and potentially border color.
4. Closeable Alerts: The alert should optionally be dismissible. This means it should accept a closable prop (boolean) and, if true, display a close button (e.g., an 'X' icon).
5. State Management for Closing: When the close button is clicked, the alert should be hidden from the UI.
6. TypeScript Integration: All props and component logic should be typed using TypeScript.

Expected Behavior:

• An alert with type="success" should appear with a green background.
• An alert with type="error" should appear with a red background.
• An alert with type="warning" should appear with an orange background.
• An alert with type="info" should appear with a blue background.
• If closable={true}, a close button should be visible. Clicking it should remove the alert from the DOM.
• If closable={false} (or not provided), no close button should be displayed.
• The message prop should be rendered clearly within the alert's content area.

Edge Cases to Consider:

• What happens if no type is provided? (Consider a default type or no styling).
• What happens if the message is an empty string? (The alert should likely still render but with no visible text).
• How will the component handle dynamic changes to the closable prop?

Examples

Example 1: Success Alert

// Parent Component Usage
<Alert message="Your profile has been updated successfully!" type="success" />

Output (Conceptual):

A visually distinct alert box with a green background, displaying the text "Your profile has been updated successfully!".

Explanation: The message prop provides the content, and type="success" applies the appropriate green styling.

Example 2: Error Alert with Close Button

// Parent Component Usage
import React, { useState } from 'react';

function App() {
  const [showError, setShowError] = useState(true);

  return (
    <div>
      {showError && (
        <Alert
          message="Failed to submit the form. Please check your inputs."
          type="error"
          closable={true}
          onClose={() => setShowError(false)}
        />
      )}
      {/* Other app content */}
    </div>
  );
}

Output (Conceptual):

Initially, a visually distinct alert box with a red background and the text "Failed to submit the form. Please check your inputs." is displayed. To its right, a small 'X' icon is visible. Clicking the 'X' icon hides the alert.

Explanation: type="error" provides red styling. closable={true} renders the close button. The onClose prop (which the parent uses to update its state) is triggered when the close button is clicked, causing the alert to be conditionally rendered and thus disappear.

Example 3: Info Alert (Not Closable)

// Parent Component Usage
<Alert message="Please note that maintenance is scheduled for tonight." type="info" />

Output (Conceptual):

A visually distinct alert box with a blue background, displaying the text "Please note that maintenance is scheduled for tonight.". No close button is present.

Explanation: type="info" applies blue styling. closable is not provided, so no close button is rendered.

Constraints

• The component should be implemented as a functional React component.
• Use React.FC for type definition of the component.
• Props should be defined using TypeScript interfaces.
• Styling can be achieved using CSS modules, styled-components, or inline styles (though a structured approach like CSS modules or styled-components is preferred for reusability).
• The solution should focus on the Alert component itself. A full application setup for testing is not required, but the component should be usable.

Notes

• Consider using a simple set of predefined CSS classes for each alert type for easy styling.
• For the close button, a simple HTML element (like a <span> or <button>) with an 'X' character can suffice.
• Think about how to manage the visibility state of the alert when it's closable. The parent component might need to control this state, so providing an onClose callback prop is a good pattern.
• The exact visual styling (colors, padding, etc.) is up to your interpretation, but ensure the different types are visually distinguishable.