Rev 3770 | Rev 4349 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
/* eslint-disable react/prop-types */
import React from 'react'
const Sidebar = ({ conversations = [], click, selectedConversation, handleShowConversation }) => {
const handleConversation = (element) => {
handleShowConversation(true);
click(element)
}
return (
<div style={{ overflowY: 'scroll' }} > F
<ul>
{conversations
? conversations.reverse().map((element, i) => {
<li key={i}
className='d-flex align-items-center'
style={{ padding: '.7rem' }}
onClick={() => handleConversation(element)}
>
<div className={`${selectedConversation?.name === element.name ? 'is_selected' : ''} usr-msg-details d-flex justify-content-start align-items-center`}>
<div className="usr-ms-img">
<img src={element.image} alt={element.name} />
</div>
<div className="usr-mg-info">
<h3>{element.name}</h3>
{parseInt(element.count_unread) > 0 &&
<p className="text-gray">
{element.count_unread} mensajes nuevos | <span> {element.last_message} </span>
</p>
}
</div>
</div>
</li>
})
:
<li className="active">
<div className="usr-msg-details">
<div className="usr-mg-info">
<h3>Sin conversaciones</h3>
</div>
</div>
</li>
}
</ul>
</div >
)
}
export default Sidebar