34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
import { FaEllipsisH } from 'react-icons/fa';
|
|
import Avatar from '@components/Avatar';
|
|
|
|
const Message = ({ text, user, date, image = '' }: any) => {
|
|
return (
|
|
<>
|
|
<div className="flex bg-grey-dark rounded-xl max-w-3xl p-5 gap-5">
|
|
{user && <Avatar user={user} />}
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex justify-between">
|
|
<div className="text-red-light text-xl username">
|
|
{user.firstName} {user.lastName}
|
|
</div>
|
|
<div className="text-grey popup-btn text-2xl">
|
|
<FaEllipsisH className="fill-grey-light" />
|
|
</div>
|
|
</div>
|
|
<div className="text-white message">{text}</div>
|
|
{image === '' ? (
|
|
''
|
|
) : (
|
|
<div className="flex justify-center">
|
|
<img src={image} alt="image" className="w-full" />
|
|
</div>
|
|
)}
|
|
<div className="text-grey-light date">{date}</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Message;
|