styles-update

src/components/Message/Message.tsx

@@ -0,0 +1,39 @@
+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