implemented text-area and basic message box

src/atoms/state.ts

@@ -12,7 +12,7 @@ export const playerState = atom({
 export const applicationState = atom({
   key: "applicationState",
   default: {
-    isChatScreen: false,
+    isChatScreen: true,
   },
 });
 

src/components/MessageBox.tsx

@@ -0,0 +1,34 @@
+import { useRecoilState } from "recoil";
+import { Button } from "./Button";
+import { TextArea } from "./TextArea";
+import { chatState } from "../atoms/state";
+import { useState } from "react";
+
+export const MessageBox = () => {
+  const [, setChatState] = useRecoilState(chatState);
+
+  const [message, setMessage] = useState("");
+
+  const onSend = () => {
+    setChatState((prev) => ({
+      chats: [
+        ...prev.chats,
+        {
+          id: prev.chats.length + 1,
+          player: 1,
+          message: message,
+          timeStamp: new Date(),
+        },
+      ],
+    }));
+
+    setMessage("");
+  };
+
+  return (
+    <div>
+      <TextArea value={message} onChange={(e) => setMessage(e.target.value)} />
+      <Button onClick={onSend}>Send</Button>
+    </div>
+  );
+};

src/components/TextArea.tsx

@@ -0,0 +1,11 @@
+import { ComponentProps } from "react";
+
+type Props = {} & ComponentProps<"textarea">;
+
+export const TextArea = ({ id, name, ...props }: Props) => {
+  return (
+    <div>
+      <textarea name={name} id={id} {...props}></textarea>
+    </div>
+  );
+};

src/components/index.ts

@@ -2,3 +2,5 @@ export * from "./Input";
 export * from "./Button";
 export * from "./ChatOptions";
 export * from "./MessageBubble";
+export * from "./MessageBox";
+export * from "./TextArea";

src/pages/ChatPage.tsx

@@ -1,4 +1,4 @@
-import { MessageBubble } from "../components";
+import { MessageBox, MessageBubble } from "../components";
 import { Chat } from "../data";
 
 type Props = {
@@ -18,6 +18,10 @@ export const ChatPage = ({ chats }: Props) => {
           />
         ))}
       </div>
+
+      <div>
+        <MessageBox />
+      </div>
     </div>
   );
 };