avatar started

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

@@ -1,14 +1,18 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { AppDockIcon } from "../../icons/HeaderIcons";
-import orgImg from "../../../assets/orgTemp.png"
+import orgImg from "../../../assets/orgTemp.png";
+import { useActiveUsers } from "../../../store/store";
+import { getAvatarColor } from "../../../modules/collaboration/users/functions/getAvatarColor";
+import { ActiveUser } from "../../../types/users";
 
 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
+  const { activeUsers } = useActiveUsers();
+  const userName = localStorage.getItem("userName") || "Anonymous";
+
+  const guestUsers: ActiveUser[] = activeUsers.filter(
+    (user: ActiveUser) => user.userName !== userName
+  );
+  console.log('guestUsers: ', guestUsers);
 
   return (
     <div className="header-container">
@@ -25,18 +29,23 @@ const Header: React.FC = () => {
             <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
+                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: "#48AC2A" }}>
-            V
+          <div
+            className="user-profile"
+            style={{ background: "var(--accent-color)" }}
+          >
+            {userName[0]}
           </div>
           <div className="user-organization">
             <img src={orgImg} alt="" />

app/src/components/ui/componets/DisplayZone.tsx

@@ -144,7 +144,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   return (
     <div
       ref={containerRef}
-      className={`zoon-wrapper ${
+      className={`zone-wrapper ${
         selectedZone?.activeSides?.includes("bottom") && "bottom"
       }`}
     >