1
0

52 lines
1.3 KiB
JavaScript

import React from 'react'
const ExpandedComment = props => {
return (
<li
className=""
key={props.id}
onMouseEnter={() => props.showCollapseLink(props.id, true)}
onMouseLeave={() => props.showCollapseLink(props.id, false)}
>
<div className="media bg bg-dark">
<img alt="profile" src="anon.jpeg" height={64} />
<div className="media-body ml-3 my-auto">
<a className="" href="#user">
username
</a>
</div>
<div className="white">
<small>{props.createdAt}</small>
{props.replies.length > 0 ? (
<span
className="a ml-3"
style={{
fontVariant: 'small-caps',
color: 'blue',
cursor: 'pointer',
display: props.displayCollapse || 'none',
}}
onClick={() => props.toggleCollapse(props.id)}
>
collapse
</span>
) : (
''
)}
<a
className="float-right ml-2"
href="#replies"
onClick={props.replyToComment}
>
reply
</a>
</div>
</div>
<div className="">{props.text}</div>
</li>
)
}
export default ExpandedComment