Add conversation component

client/src/App.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import logo from "./logo.svg";
 import "./App.css";
+import Conversation from "./features/conversations/Conversation";
 
 interface GreeterProps {
   name: string;
@@ -30,28 +31,8 @@ function App() {
   const [count, setCount] = useState(0);
   const [name, setName] = useState("");
   return (
-    <div className="bg-sky-800 bg-opacity-80 text-white flex flex-col items-center justify-center h-screen">
-      <img
-        src={logo}
-        className="w-[300px] animate-spin"
-        alt="logo"
-        style={{
-          animationDuration: `${20 / (name.length || 1)}s`,
-        }}
-      />
-      <div className="text-center">
-        <p className="text-3xl">Hello Vite + React!</p>
-        <p>
-          <button
-            className="text-xl shadow hover:shadow-md transition-all bg-lime-500 bg-opacity-70 hover:bg-lime-600 p-2 rounded m-2"
-            type="button"
-            onClick={() => setCount((count) => count + 1)}
-          >
-            count is: {count}
-          </button>
-        </p>
-        <Greeter name={name} setName={setName} />
-      </div>
+    <div>
+      <Conversation />
     </div>
   );
 }

client/src/features/conversations/Conversation.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+const Conversation: React.FC = () => {
+  const [messages, setMessages] = React.useState<string[]>([]);
+  const [messageInput, setMessageInput] = React.useState("");
+
+  console.log(messageInput)
+  return (
+    <div>
+      <div>
+        {messages.map((message, index) => (
+          <div className="m-2" key={index}>
+            {message}
+          </div>
+        ))}
+      </div>
+
+      <form
+        className="flex flex-row"
+        onSubmit={(e) => {
+          e.preventDefault();
+          setMessages([...messages, messageInput]);
+          setMessageInput("");
+        }}
+      >
+        <input
+          className="flex-auto border-2 p-2 rounded mx-1"
+          type="text"
+          placeholder="message"
+          value={messageInput}
+          onChange={(e) => setMessageInput(e.target.value)}
+        />
+        <button className="bg-blue-300 p-2 rounded mr-1" type="submit">
+          Send
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default Conversation;

client/src/features/messages/MessageInput.tsx

@@ -0,0 +1 @@
+import React from 'react';