app/src/components/ui/collaboration/CommentThreads.tsx

@@ -3,16 +3,23 @@ import { getAvatarColor } from "../../../modules/collaboration/functions/getAvat
 
 const CommentThreads: React.FC = () => {
   const [expand, setExpand] = useState(false);
-  const commentsedUsers = [
-    {
-      userId: "1",
-      userName: "user",
-    },
-    {
-      userId: "2",
-      userName: "Admin",
-    },
-  ];
+  const commentsedUsers = [{ creatorId: "1" }];
+
+  const CommentDetails = {
+    state: "active",
+    commentId: "c-1",
+    creatorId: "12",
+    createdAt: "2 hours ago",
+    comment: "Thread check",
+    lastUpdatedAt: "string",
+    replies: [],
+  };
+
+  function getUsername(userId: string) {
+    console.log(userId);
+    const UserName = "username";
+    return UserName;
+  }
 
   function getDetails(type?: "clicked") {
     if (type === "clicked") {
@@ -36,20 +43,26 @@ const CommentThreads: React.FC = () => {
           {commentsedUsers.map((val, i) => (
             <div
               className="users"
-              key={val.userId}
-              style={{ background: getAvatarColor(i, val.userName) }}
+              key={val.creatorId}
+              style={{
+                background: getAvatarColor(i, getUsername(val.creatorId)),
+              }}
             >
-              {val.userName[0]}
+              {getUsername(val.creatorId)[0]}
             </div>
           ))}
         </div>
         <div className={`last-comment-details ${expand ? "expand" : ""}`}>
           <div className="header">
-            <div className="user-name">user</div>
-            <div className="time">4 mins, ago</div>
+            <div className="user-name">
+              {getUsername(CommentDetails.creatorId)}
+            </div>
+            <div className="time">{CommentDetails.createdAt}</div>
           </div>
-          <div className="message">hello</div>
-          <div className="replies">0 replies</div>
+          <div className="message">{CommentDetails.comment}</div>
+          {CommentDetails.replies.length > 0 && (
+            <div className="replies">{CommentDetails.replies.length}</div>
+          )}
         </div>
       </button>
     </div>

app/src/styles/scene/comments.scss

@@ -1,22 +1,22 @@
 @use "../abstracts/variables" as *;
 @use "../abstracts/mixins" as *;
 
-.comments-main-wrapper{
+.comments-main-wrapper {
   position: relative;
 }
+
 .comments-threads-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   padding: 4px;
   background: var(--background-color);
-  border-radius: #{$border-radius-large} #{$border-radius-large} #{$border-radius-large}
+  border-radius: #{$border-radius-extra-large} #{$border-radius-extra-large} #{$border-radius-extra-large}
     0;
   backdrop-filter: blur(12px);
   z-index: 1000;
   transform: translateY(-100%);
   outline: 1px solid var(--border-color);
-  transition: all 0.2s ease-out;
   .comments-threads-container {
     display: flex;
     align-items: start;
@@ -36,7 +36,7 @@
       align-items: start;
       flex-direction: column;
       overflow: hidden;
-      transition: all 0.2s;
+      transition: all 0.2s ease-in;
       .header {
         @include flex-center;
         gap: 10px;

app/src/types/collaborationTypes.d.ts

@@ -10,7 +10,7 @@ interface CommentSchema {
     replies: Reply[];
 }
 
-interface Reply {
+export interface Reply {
     replyId: string;
     creatorId: string;
     createdAt: string;
@@ -18,4 +18,4 @@ interface Reply {
     reply: string;
 }
 
-type CommentsSchema = CommentSchema[];
+type CommentsSchema = CommentSchema[];