43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import SidebarHeader from "./SidebarHeader";
|
|
import useSidebarVisibility from "./useSidebarVisibility";
|
|
import "./Sidebar.css";
|
|
import { UsersData } from "../../background/types/roomData";
|
|
|
|
interface Props {
|
|
usersData: UsersData;
|
|
}
|
|
|
|
function Sidebar(props: Props) {
|
|
const { sidebarVisibility, toggleSidebarVisibility, sidebarToggleText } =
|
|
useSidebarVisibility();
|
|
|
|
return (
|
|
<div className={`sidebar sidebar-${sidebarVisibility}`}>
|
|
<SidebarHeader sidebarVisibility={sidebarVisibility} />
|
|
<div>
|
|
<h3> No room</h3>
|
|
{props.usersData.usersWithOutRoom.map((username) => (
|
|
<div>{username}</div>
|
|
))}
|
|
</div>
|
|
<div>
|
|
{props.usersData.roomsData.map((roomData) => {
|
|
return (
|
|
<>
|
|
<h3> {roomData.roomName} </h3>
|
|
{roomData.participants.map((participant) => (
|
|
<div> {participant.displayName} </div>
|
|
))}
|
|
</>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="sidebar-footer">
|
|
<button onClick={toggleSidebarVisibility}>{sidebarToggleText}</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Sidebar;
|