32 lines
1.3 KiB
TypeScript
32 lines
1.3 KiB
TypeScript
import type { MessagesResponse, UsersResponse } from "../../../types/pb_types";
|
|
import Avatar from "../Avatar";
|
|
import { FaRegClock } from "react-icons/fa";
|
|
|
|
export type MessageExpand = MessagesResponse<{
|
|
author: UsersResponse;
|
|
}>;
|
|
|
|
|
|
export default function Message({ message }: { message: MessageExpand }) {
|
|
if (!message.expand) return null;
|
|
const author = message.expand.author;
|
|
const avatarUrl = author.avatar ? import.meta.env.PUBLIC_PB_API + `/api/files/${author.collectionId}/${author.id}/${author.avatar}?thumb=100x100` : undefined;
|
|
const date = new Date(message.created);
|
|
const dateStr = `${date.getHours()}:${date.getMinutes()}`;
|
|
|
|
return (
|
|
<div className='flex justify-start p-4' key={message.id}>
|
|
{message.expand && <Avatar avatarUrl={avatarUrl} firstName={author.firstname} lastName={author.lastname} />}
|
|
<div className='flex flex-col items-start justify-center'>
|
|
<div className='flex items-center my-4 ml-2 gap-2'>
|
|
<p className="pr-2 py-2 border-b border-gray-200 text-xl text-gray-600">{author.firstname} {author.lastname}</p>
|
|
<p className="flex gap-2 items-center"><FaRegClock />{dateStr}</p>
|
|
</div>
|
|
<div className='p-2 bg-gray-100 rounded-md '>
|
|
<p>{message.content}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|