Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: implement dashboard layout with sidebar, navbar, and marketplace banner

Browse Source
This commit is contained in:
Vishnu
2025-03-29 16:41:44 +05:30
parent bc35687b26
commit 0e5fe6e1dc
19 changed files with 775 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
app/src/components/layout/sidebarRight/Header.tsx
View File

@@ -1,9 +1,10 @@
import React, { useEffect } from "react";
import React, { 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();
@@ -12,47 +13,60 @@ const Header: React.FC = () => {
const guestUsers: ActiveUser[] = activeUsers.filter(
(user: ActiveUser) => user.userName !== userName
);
console.log('guestUsers: ', guestUsers);
const [userManagement, setUserManagement] = useState(false);
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: getAvatarColor(index) }}
>
{user.userName[0]}
</div>
</>
))}
</div>
<div className="user-profile-container">
<>
{userManagement && (
<CollaborationPopup setUserManagement={setUserManagement} />
)}
<div className="header-container">
<div className="options-container">
<div
className="user-profile"
style={{ background: "var(--accent-color)" }}
className="share-button"
onClick={() => {
setUserManagement(true);
}}
>
{userName[0]}
Share
</div>
<div className="user-organization">
<img src={orgImg} alt="" />
<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>
</div>
</>
);
};