39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
|
|
export interface MessageProps {
|
|
text: string;
|
|
isOwn?: boolean;
|
|
timestamp?: string;
|
|
status?: 'sent' | 'delivered' | 'read';
|
|
}
|
|
|
|
export const Message: React.FC<MessageProps> = ({
|
|
text,
|
|
isOwn = false,
|
|
timestamp,
|
|
status = 'sent'
|
|
}) => {
|
|
return (
|
|
<div className={`flex ${isOwn ? 'justify-end' : 'justify-start'} mb-4`}>
|
|
<div className={`max-w-xs lg:max-w-md px-4 py-2 rounded-2xl ${
|
|
isOwn
|
|
? 'bg-maya-primary text-white rounded-br-none'
|
|
: 'bg-maya-accent text-gray-800 rounded-bl-none'
|
|
}`}>
|
|
<p className="text-sm">{text}</p>
|
|
<div className={`flex items-center justify-end space-x-1 mt-1 ${
|
|
isOwn ? 'text-red-100' : 'text-gray-500'
|
|
}`}>
|
|
<span className="text-xs">{timestamp}</span>
|
|
{isOwn && (
|
|
<span className="text-xs">
|
|
{status === 'read' ? '✓✓' : status === 'delivered' ? '✓✓' : '✓'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Message |