60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
|
import React, { useState } from "react";
|
||
|
|
import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
|
||
|
|
|
||
|
|
const CommentThreads: React.FC = () => {
|
||
|
|
const [expand, setExpand] = useState(true);
|
||
|
|
const commentsedUsers = [
|
||
|
|
{
|
||
|
|
userId: "1",
|
||
|
|
userName: "user",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
userId: "1",
|
||
|
|
userName: "Admin",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
function getDetails(type?: "clicked") {
|
||
|
|
if (type === "clicked") {
|
||
|
|
setExpand(true);
|
||
|
|
} else {
|
||
|
|
setExpand((prev) => !prev);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="comments-threads-wrapper">
|
||
|
|
<button
|
||
|
|
onPointerEnter={() => getDetails()}
|
||
|
|
onPointerLeave={() => getDetails()}
|
||
|
|
onClick={() => getDetails("clicked")}
|
||
|
|
className={`comments-threads-container ${expand ? "open" : "closed"}`}
|
||
|
|
>
|
||
|
|
<div className="users-commented">
|
||
|
|
{commentsedUsers.map((val, i) => (
|
||
|
|
<div
|
||
|
|
className="users"
|
||
|
|
key={val.userId}
|
||
|
|
style={{ background: getAvatarColor(i, val.userName) }}
|
||
|
|
>
|
||
|
|
{val.userName[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>
|
||
|
|
<div className="message">hello</div>
|
||
|
|
<div className="replies">0 replies</div>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CommentThreads;
|