User Profile Component

Build a reusable user profile card component with locally scoped styles to avoid style conflicts.

Requirements

Create a user profile card component that displays user information with the following specifications:

Component Structure

The component should accept these props:

• name (string): The user's full name
• role (string): The user's job title or role
• avatarUrl (string): URL to the user's profile image
• status (string): User status, either "active", "away", or "offline"

Styling Requirements

The component must use locally scoped styles to prevent CSS class name conflicts with other components. The styles should include:

1. Card container: A white background with rounded corners, padding, and a subtle shadow
2. Avatar: A circular image (64x64 pixels) with a border
3. Status indicator: A small colored dot that appears on the avatar:
   • Green for "active"
   • Yellow for "away"
   • Gray for "offline"
4. Name: Bold text, larger font size
5. Role: Smaller, muted text color

The styles must be scoped to this component only and not affect other parts of the application.

Test Cases

• Renders the user's name and role correctly @test
• Displays the avatar image with the correct URL @test
• Shows green status indicator for active users @test
• Shows yellow status indicator for away users @test
• Shows gray status indicator for offline users @test

Implementation

The component should be implemented in a JavaScript file with an accompanying CSS Module file for scoped styles.

@generates @generates

Dependencies { .dependencies }

react { .dependency }

Provides the component framework.

create-react-app { .dependency }

Provides the build system and CSS Modules support.