72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { AppDockIcon } from "../../icons/HeaderIcons";
|
|
import orgImg from "../../../assets/orgTemp.png";
|
|
import { useActiveUsers } from "../../../store/store";
|
|
import { getAvatarColor } from "../../../modules/collaboration/users/functions/getAvatarColor";
|
|
import { ActiveUser } from "../../../types/users";
|
|
import CollaborationPopup from "../../templates/CollaborationPopup";
|
|
|
|
const Header: React.FC = () => {
|
|
const { activeUsers } = useActiveUsers();
|
|
const userName = localStorage.getItem("userName") || "Anonymous";
|
|
|
|
const guestUsers: ActiveUser[] = activeUsers.filter(
|
|
(user: ActiveUser) => user.userName !== userName
|
|
);
|
|
|
|
const [userManagement, setUserManagement] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
{userManagement && (
|
|
<CollaborationPopup setUserManagement={setUserManagement} />
|
|
)}
|
|
<div className="header-container">
|
|
<div className="options-container">
|
|
<div
|
|
className="share-button"
|
|
onClick={() => {
|
|
setUserManagement(true);
|
|
}}
|
|
>
|
|
Share
|
|
</div>
|
|
<div className="app-docker-button">
|
|
<AppDockIcon />
|
|
</div>
|
|
</div>
|
|
<div className="split"></div>
|
|
<div className="users-container">
|
|
<div className="guest-users-container">
|
|
{guestUsers.length > 3 && (
|
|
<div className="other-guest">+{guestUsers.length - 3}</div>
|
|
)}
|
|
{guestUsers.slice(0, 3).map((user, index) => (
|
|
<div
|
|
key={index}
|
|
className="user-profile"
|
|
style={{ background: getAvatarColor(index) }}
|
|
>
|
|
{user.userName[0]}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="user-profile-container">
|
|
<div
|
|
className="user-profile"
|
|
style={{ background: "var(--accent-color)" }}
|
|
>
|
|
{userName[0]}
|
|
</div>
|
|
<div className="user-organization">
|
|
<img src={orgImg} alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Header;
|