avatar started

app/src/modules/collaboration/collabUserIcon.tsx

@@ -1,53 +1,33 @@
 import React from "react";
+import CustomAvatar from "./users/Avatar";
 
 interface CollabUserIconProps {
-    color: string;
-    userImage: string;
-    userName: string;
+  userName: string;
+  userImage?: string;
+  index?: number;
+  color: string;
 }
 
 const CollabUserIcon: React.FC<CollabUserIconProps> = ({
-    color,
-    userImage,
-    userName,
+  userImage,
+  userName,
+  index = 0,
+  color,
 }) => {
-    return (
-        <div
-            style={{
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                flexDirection: "column",
-                gap: "6px",
-                // transform:"translate(-20%, 0%)",
-            }}
-        >
-            <img
-                src={userImage}
-                alt={userName}
-                style={{
-                    width: "30px",
-                    height: "30px",
-                    outline: `2px solid ${color}`,
-                    borderRadius: "50%",
-                    objectFit: 'cover'
-                }}
-            />
-            <div
-                style={{
-                    display: 'flex',
-                    padding: "3px 5px",
-                    backgroundColor: color,
-                    borderRadius: "6px",
-                    color: "white",
-                    fontSize: "14px",
-                    fontWeight: 400
-                }}
-            >
-                {userName}
-            </div>
-        </div>
-    );
+  return (
+    <div className="collab-user-live-container">
+      <div className="user-image-container">
+        {userImage ? (
+          <img className="user-image" src={userImage} alt={userName} />
+        ) : (
+          <CustomAvatar name={userName} index={index} />
+        )}
+      </div>
+      <div className="user-name" style={{ backgroundColor: color }}>
+        {userName}
+      </div>
+    </div>
+  );
 };
 
 export default CollabUserIcon;