styles-update

src/components/ChatInterface/ChatInterface.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import Message from '../Message';
+import  Input  from '../Input';
+import Button  from '../Button';
+
+export const ChatInterface: React.FC = () => {
+  const [message, setMessage] = useState('');
+  const [messages, setMessages] = useState([
+    { id: 1, text: '¡Hola! ¿En qué puedo ayudarte?', isOwn: false, timestamp: '10:00' },
+    { id: 2, text: 'Me gustaría información sobre mis inversiones', isOwn: true, timestamp: '10:01' },
+  ]);
+
+  const sendMessage = () => {
+    if (message.trim()) {
+      setMessages([
+        ...messages,
+        {
+          id: messages.length + 1,
+          text: message,
+          isOwn: true,
+          timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+        }
+      ]);
+      setMessage('');
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-maya-background rounded-lg border border-gray-200">
+      {/* Chat Header */}
+      <div className="bg-white px-4 py-3 border-b border-gray-200 rounded-t-lg">
+        <div className="flex items-center space-x-3">
+          <div className="w-3 h-3 bg-maya-primary rounded-full"></div>
+          <h3 className="font-semibold text-gray-800">Soporte Banorte</h3>
+          <div className="w-2 h-2 bg-maya-success rounded-full"></div>
+        </div>
+      </div>
+
+      {/* Messages Area */}
+      <div className="flex-1 p-4 overflow-y-auto">
+        {messages.map((msg) => (
+          <Message
+            key={msg.id}
+            text={msg.text}
+            isOwn={msg.isOwn}
+            timestamp={msg.timestamp}
+          />
+        ))}
+      </div>
+
+      {/* Input Area */}
+      <div className="bg-white p-4 border-t border-gray-200 rounded-b-lg">
+        <div className="flex space-x-2">
+          <Input
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder="Escribe tu mensaje..."
+            className="flex-1"
+            onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
+          />
+          <Button onClick={sendMessage} variant="primary">
+            Enviar
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatInterface