31 lines
698 B
TypeScript
31 lines
698 B
TypeScript
import React from "react";
|
|
import cx from "classnames";
|
|
import { useChat } from "../../hooks";
|
|
import "./UserList.css";
|
|
|
|
interface Props {
|
|
fluid?: boolean;
|
|
}
|
|
|
|
export function UserList({ fluid = false }: Props) {
|
|
const { online } = useChat();
|
|
|
|
return (
|
|
<div className="UserList">
|
|
<div className="UserList-heading">
|
|
<h4>Users in chat right now</h4>
|
|
<div className="Chat-online">
|
|
<i className="far fa-user fa-sm" /> {online.length}
|
|
</div>
|
|
</div>
|
|
<ul className={cx({ fluid })}>
|
|
{online.map((user) => (
|
|
<li key={user}>
|
|
<a href={`/@${user}`}>@{user}</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|