Create Chat.jsx

client/src/Chat.jsx

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react';
+
+export default function Chat({ socket, roomId, name }) {
+  const [messages, setMessages] = useState([]);
+  const [text, setText] = useState('');
+
+  useEffect(() => {
+    const onMsg = (m) => setMessages((prev) => [...prev, m]);
+    const onSys = (m) => setMessages((prev) => [...prev, { name: 'System', text: `${m.name} joined`, at: Date.now() }]);
+    socket.on('chat_message', onMsg);
+    socket.on('system', onSys);
+    return () => { socket.off('chat_message', onMsg); socket.off('system', onSys); };
+  }, [socket]);
+
+  const send = () => {
+    if (!text.trim()) return;
+    const m = { name, text, at: Date.now() };
+    setMessages((prev) => [...prev, m]);
+    socket.emit('chat_message', { roomId, name, text });
+    setText('');
+  };
+
+  return (
+    <div style={{ marginTop: 16 }}>
+      <div style={{ maxHeight: 200, overflow: 'auto', border: '1px solid #ddd', padding: 8 }}>
+        {messages.map((m, i) => (
+          <div key={i}><b>{m.name}:</b> {m.text}</div>
+        ))}
+      </div>
+      <div style={{ marginTop: 8, display: 'flex', gap: 8 }}>
+        <input value={text} onChange={e => setText(e.target.value)} placeholder="Type a message" style={{ flex: 1 }} />
+        <button onClick={send}>Send</button>
+      </div>
+    </div>
+  );
+}