React Presence Indicators

Build a React component that visually indicates the online status of users within an application. This is a common feature in chat applications, social platforms, and collaborative tools, providing users with real-time feedback on who is currently active.

Problem Description

Your task is to create a reusable React component, PresenceIndicator, that displays a visual cue representing a user's online status. This component will receive the user's name and their current presence status as props.

Key Requirements:

1. Component Structure: Create a functional React component named PresenceIndicator.
2. Props:
   • userName (string): The name of the user to display.
   • isOnline (boolean): true if the user is online, false otherwise.
3. Visual Representation:
   • When isOnline is true, the indicator should visually represent "online". This could be a colored dot (e.g., green) next to the user's name.
   • When isOnline is false, the indicator should visually represent "offline". This could be a different colored dot (e.g., grey) or no dot at all.
4. Styling: Apply basic styling to distinguish between online and offline states. You can use inline styles or CSS classes.
5. Reusability: The component should be easily integrated into other parts of a React application.

Expected Behavior:

• When passed userName="Alice" and isOnline={true}, the component should render "Alice" along with an "online" indicator.
• When passed userName="Bob" and isOnline={false}, the component should render "Bob" along with an "offline" indicator.

Edge Cases:

• Consider how the component should behave if userName is an empty string.
• Ensure the styling is responsive and looks good on typical screen sizes.

Examples

Example 1:

Input Props:
userName: "Alice"
isOnline: true

Expected Output (Conceptual - rendered HTML might vary):
<div class="presence-indicator online">
  <span class="indicator-dot"></span>
  <span class="user-name">Alice</span>
</div>

Explanation: Alice is online, so the indicator displays a green dot (or equivalent) and her name.

Example 2:

Input Props:
userName: "Bob"
isOnline: false

Expected Output (Conceptual):
<div class="presence-indicator offline">
  <span class="indicator-dot"></span>
  <span class="user-name">Bob</span>
</div>

Explanation: Bob is offline, so the indicator displays a grey dot (or equivalent) and his name.

Example 3:

Input Props:
userName: ""
isOnline: true

Expected Output (Conceptual):
<div class="presence-indicator online">
  <span class="indicator-dot"></span>
  <span class="user-name"></span>
</div>

Explanation: Even with an empty username, the presence indicator should still function and show the online status.

Constraints

• The solution must be implemented in TypeScript.
• The PresenceIndicator component should be a functional component.
• The component should accept userName (string) and isOnline (boolean) as props.
• Styling should be applied directly within the component (inline styles or CSS modules/classes if you prefer a more organized approach, but keep it simple for this challenge).
• No external state management libraries (like Redux, Zustand) are required for this specific component.

Notes

• Think about how you can conditionally render or style elements based on the isOnline prop.
• Consider using simple CSS for the visual indicator (e.g., a small circular div with a background color).
• The goal is to create a clear and understandable component that solves the described problem. You can choose your preferred styling method, but aim for readability and maintainability.