51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
|
import React from "react";
|
||
|
|
import { AppDockIcon } from "../../icons/HeaderIcons";
|
||
|
|
import orgImg from "../../../assets/orgTemp.png"
|
||
|
|
|
||
|
|
const Header: React.FC = () => {
|
||
|
|
const guestUsers = [
|
||
|
|
{ value: "Nazria", color: "#43C06D" },
|
||
|
|
{ value: "Name1", color: "#0050EB" },
|
||
|
|
{ value: "Abigail", color: "#FF6600" },
|
||
|
|
{ value: "Jack", color: "#488EF6" },
|
||
|
|
]; // Example guest users array
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="header-container">
|
||
|
|
<div className="options-container">
|
||
|
|
<div className="share-button">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: user.color }}
|
||
|
|
>
|
||
|
|
{user.value[0]}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="user-profile-container">
|
||
|
|
<div className="user-profile" style={{ background: "#48AC2A" }}>
|
||
|
|
V
|
||
|
|
</div>
|
||
|
|
<div className="user-organization">
|
||
|
|
<img src={orgImg} alt="" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Header;
|