Dwinzo_dev/app/src/components/layout/sidebarRight/Header.tsx

72 lines
2.3 KiB
TypeScript
Raw Normal View History

import React, { useState } from "react";
2025-03-25 06:17:41 +00:00
import { AppDockIcon } from "../../icons/HeaderIcons";
2025-03-28 13:50:52 +00:00
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";
2025-03-25 06:17:41 +00:00
const Header: React.FC = () => {
2025-03-28 13:50:52 +00:00
const { activeUsers } = useActiveUsers();
const userName = localStorage.getItem("userName") || "Anonymous";
const guestUsers: ActiveUser[] = activeUsers.filter(
(user: ActiveUser) => user.userName !== userName
);
const [userManagement, setUserManagement] = useState(false);
2025-03-25 06:17:41 +00:00
return (
<>
{userManagement && (
<CollaborationPopup setUserManagement={setUserManagement} />
)}
<div className="header-container">
<div className="options-container">
2025-03-28 13:50:52 +00:00
<div
className="share-button"
onClick={() => {
setUserManagement(true);
}}
2025-03-28 13:50:52 +00:00
>
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>
))}
2025-03-25 06:17:41 +00:00
</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>
2025-03-25 06:17:41 +00:00
</div>
</div>
</div>
</>
2025-03-25 06:17:41 +00:00
);
};
export default Header;