Difficulty: Medium

In this exercise, you will build a dynamic AvatarsView component that can display up to three avatar images. The component should adapt its layout based on the number of images provided, handling asynchronous image loading, placeholders, and error states gracefully.

Layout

Single Avatar

Displays one circular image.

Two Avatars

Displays two overlapping circular images, arranged diagonally (top-left to bottom-right). The bottom-right avatar is on top, with a border to visually separate the images.

Three Avatars

Arranges avatars in a triangle shape. First avatar is positioned above. Second and third avatars form a row at the bottom. Avatars slightly overlap for a visually interesting look. Each avatar has a border to maintain clear separation.

Z-Index:

• First avatar: backmost layer.
• Second avatar (bottom-right): middle layer.
• Third avatar (bottom-left): topmost layer.

Additional Requirements

• AvatarsView accepts up to three image URLs. Layout should automatically adjust based on the number of images provided.
• Load images asynchronously from the provided URLs. Show a placeholder while the image is loading. If loading fails, display an error placeholder instead.
• Images should be centered within their circles, cropped to fill the circle, and maintain their original aspect ratio without distortion.

Testing

Feel free to use these avatar images to test your implementation: