1748 |
stevensc |
1 |
import React, { useState } from 'react'
|
|
|
2 |
|
|
|
3 |
const MessageBarHead = ({ selectedConversation, handleShowConversation, setShowOptions }) => {
|
|
|
4 |
|
|
|
5 |
const [showOptions, setShowOptions] = useState(false)
|
|
|
6 |
|
|
|
7 |
return (
|
|
|
8 |
<div className="message-bar-head">
|
|
|
9 |
<div className="usr-msg-details">
|
|
|
10 |
<i
|
|
|
11 |
className="fas fa-angle-left icon msgs-hide"
|
|
|
12 |
onClick={() => handleShowConversation(false)}
|
|
|
13 |
></i>
|
|
|
14 |
<div className="usr-ms-img">
|
|
|
15 |
<img src={selectedConversation.image} alt={`${selectedConversation.name} avatars`} />
|
|
|
16 |
</div>
|
|
|
17 |
<div className="usr-mg-info">
|
|
|
18 |
<h3>{selectedConversation.name}</h3>
|
|
|
19 |
<p>Online</p>
|
|
|
20 |
</div>
|
|
|
21 |
</div>
|
|
|
22 |
<div className="ed-opts" onClick={() => setShowOptions(!showOptions)}>
|
|
|
23 |
<i className="la la-ellipsis-v icon"></i>
|
|
|
24 |
<ul className={showOptions ? "ed-options active" : "ed-options"}>
|
|
|
25 |
<li>
|
|
|
26 |
<a href="#" className="btn-clean-messages" title="">Limpiar </a>
|
|
|
27 |
</li>
|
|
|
28 |
<li>
|
|
|
29 |
<a href="#" className="btn-delete-conversation" title="">Borrar</a>
|
|
|
30 |
</li>
|
|
|
31 |
<li>
|
|
|
32 |
<a href="#" className="btn-block-user" title="">Bloquear</a>
|
|
|
33 |
</li>
|
|
|
34 |
</ul>
|
|
|
35 |
</div>
|
|
|
36 |
</div>
|
|
|
37 |
)
|
|
|
38 |
}
|
|
|
39 |
export default MessageBarHead
|