Dwinzo_dev/app/src/modules/collaboration/collabUserIcon.tsx

import React from "react";
import CustomAvatar from "./users/Avatar";

interface CollabUserIconProps {
  userName: string;
  userImage?: string;
  index?: number;
  color: string;
}

const CollabUserIcon: React.FC<CollabUserIconProps> = ({
  userImage,
  userName,
  index = 0,
  color,
}) => {
  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} color={color} />
          // <div
          //   className="user-image"
          //   style={{
          //     lineHeight: "30px",
          //     textTransform: "uppercase",
          //     textAlign: "center",
          //     fontSize: "16px",
          //     borderRadius: "50%",
          //     backgroundColor: color,
          //     overflow: "hidden",
          //     backgroundSize: "cover",
          //     backgroundPosition: "center",
          //     color: "white",
          //     fontWeight: "bold",
          //   }}>
          //   {userName[0]}
          // </div>
        )}
      </div>
      <div className="user-name" style={{ backgroundColor: color }}>
        {userName}
      </div>
    </div>
  );
};

export default CollabUserIcon;