React Avatar Component with Customizable Styling

This challenge asks you to build a reusable React avatar component that displays an image and allows for customization of its size, shape (circle or square), and border. A well-designed avatar component is a fundamental building block for many applications, enhancing user experience and visual appeal.

Problem Description

You need to create a React component called Avatar that renders an image within a container. The component should accept the following props:

• src: (string, required) The URL of the image to display.
• alt: (string, required) Alternative text for the image (accessibility).
• size: (number, optional, default: 50) The size of the avatar in pixels (both width and height).
• shape: (string, optional, default: 'circle') The shape of the avatar. Can be either 'circle' or 'square'.
• border: (string, optional, default: 'none') The border style for the avatar. Can be 'solid', 'dashed', or 'none'. If a border is applied, it should have a width of 2px.

The component should render a div element as the container, styled according to the provided shape and border props. Inside the div, an img element should display the image, using the src and alt props. The div and img elements should have the specified size for both width and height.

Expected Behavior:

• The component should render correctly with all provided props.
• The component should handle invalid shape values gracefully (defaulting to 'circle').
• The component should handle invalid border values gracefully (defaulting to 'none').
• The image should be responsive within the container, maintaining its aspect ratio.

Examples

Example 1:

Input: <Avatar src="https://example.com/avatar.jpg" alt="User Avatar" size={100} shape="square" border="solid" />
Output: A 100x100 pixel square container with a 2px solid border, containing an image from the provided URL with alt text "User Avatar".
Explanation: All props are provided, so the component renders a square avatar with a solid border and the specified size.

Example 2:

Input: <Avatar src="https://example.com/avatar.jpg" alt="User Avatar" />
Output: A 50x50 pixel circle container with no border, containing an image from the provided URL with alt text "User Avatar".
Explanation: Only required props are provided. The component uses default values for `size`, `shape`, and `border`.

Example 3:

Input: <Avatar src="https://example.com/avatar.jpg" alt="User Avatar" shape="triangle" border="dotted" />
Output: A 50x50 pixel circle container with no border, containing an image from the provided URL with alt text "User Avatar".
Explanation: Invalid `shape` and `border` values are provided. The component defaults to 'circle' for shape and 'none' for border.

Constraints

• The component must be written in TypeScript.
• The component should use inline styles for simplicity. Avoid external CSS files.
• The size prop must be a number greater than 0. If it's not, default to 50.
• The shape prop must be one of 'circle' or 'square'. Any other value should default to 'circle'.
• The border prop must be one of 'none', 'solid', or 'dashed'. Any other value should default to 'none'.
• The component should be reusable and maintainable.

Notes

• Consider using a conditional rendering approach to handle the different shapes.
• Think about how to apply the border style based on the border prop.
• Focus on creating a clean and well-structured component.
• Remember to handle the case where the image URL is invalid (though error handling for this is not explicitly required, consider it for robustness).