37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import { h } from 'preact';
|
|
|
|
import { mergeClasses } from './Util';
|
|
import { Contact, Conversation } from 'common/graph/type';
|
|
|
|
interface Props {
|
|
contacts: Contact[];
|
|
conversation: Conversation;
|
|
|
|
active: boolean;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export default function ConversationItem({ conversation: conv, contacts, active, onClick }: Props) {
|
|
return (
|
|
<li key={conv.id}>
|
|
<button onClick={onClick}
|
|
class={mergeClasses(
|
|
'w-full flex items-center gap-2.5 text-left px-1.5 py-1.5 rounded focus:outline-none',
|
|
active ? 'bg-gray-300/50' : 'hover:bg-gray-200')}>
|
|
<div class={mergeClasses(
|
|
'w-9 h-9 p-2 bg-gray-300/75 rounded-full flex-shrink-0 interact-none',
|
|
active && 'bg-gray-300')}>
|
|
<img class='w-5 h-5' src='../../client/res/icon/chat.svg' width={32} height={32} alt='' role='presentation'/>
|
|
</div>
|
|
<div class='overflow-hidden flex flex-col justify-center'>
|
|
<p class={mergeClasses('text-sm font-medium truncate', active ? 'text-gray-900' : 'text-gray-600')}>
|
|
{conv.title}</p>
|
|
<p class={mergeClasses('text-xs font-medium truncate', active ? 'text-gray-800' : 'text-gray-400')}>
|
|
{conv.participants.map(address => contacts.filter(contact =>
|
|
contact.addresses.includes(address))[0]?.name ?? address).join(', ')}</p>
|
|
</div>
|
|
</button>
|
|
</li>
|
|
);
|
|
}
|