Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 1x 1x 3x 2x 2x 1x 1x 1x 1x 2x 2x 2x 1x 1x 1x 1x 1x | import React from 'react';
import styles from './UserList.module.css';
interface User {
userId: string;
role: string;
}
interface UserListProps {
users: User[];
}
/**
* UserList component
*
* Renders a list of users currently connected to a waiting lobby,
* displaying each user's ID alongside their assigned role.
*
* If there are no users connected, it shows a friendly placeholder message.
*
* @component
* @param {UserListProps} props - The properties object.
* @param {User[]} props.users - An array of user objects to display.
* Each user object contains:
* - `userId` (string): The unique identifier for the user.
* - `role` (string): The user's assigned role in the lobby.
*
* @returns {JSX.Element} A container with a list of users and their roles,
* or a message indicating no users are connected.
*
* @example
* ```tsx
* const users = [
* { userId: 'alice', role: 'Player' },
* { userId: 'bob', role: 'Spectator' },
* ];
*
* <UserList users={users} />
* ```
*/
const UserList: React.FC<UserListProps> = ({ users }) => {
if (!users || users.length === 0) {
return <p>No users connected yet.</p>;
}
return (
<div className={styles.userListContainer}>
<ul className={styles.userList}>
{users.map(({ userId, role }) => (
<li key={userId}>
<strong>{userId}</strong> — <em>{role}</em>
</li>
))}
</ul>
</div>
);
};
export default UserList;
|