Add chat messages mockup (#14)

packages/react-chat/src/components/Chat.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import { Theme } from "../styles/themes";
 
 import { Channels } from "./Channels";
-import { ChatBody } from "./ChatBody";
+import { ChatBody } from "./Chat/ChatBody";
 import { Members } from "./Members";
 
 interface ChatProps {

packages/react-chat/src/components/Chat/ChatBody.tsx

@@ -0,0 +1,35 @@
+import React, { useCallback, useState } from "react";
+import styled from "styled-components";
+
+import { ChatMessage } from "../models/ChatMessage";
+
+import { ChatInput } from "./ChatInput";
+import { ChatMessages } from "./ChatMessages";
+
+export function ChatBody() {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+
+  const addMessage = useCallback(
+    (message: string) => {
+      setMessages((prevMessages) => [
+        ...prevMessages,
+        { sender: "User1", date: new Date(), content: message },
+      ]);
+    },
+    [messages]
+  );
+
+  return (
+    <ChatBodyWrapper>
+      <ChatMessages messages={messages} />
+      <ChatInput addMessage={addMessage} />
+    </ChatBodyWrapper>
+  );
+}
+
+const ChatBodyWrapper = styled.div`
+  flex: 1;
+  height: 100%;
+  max-width: 50%;
+  background: ${({ theme }) => theme.bodyBackgroundColor};
+`;

packages/react-chat/src/components/Chat/ChatInput.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+type ChatInputProps = {
+  addMessage: (message: string) => void;
+};
+
+export function ChatInput({ addMessage }: ChatInputProps) {
+  const [content, setContent] = useState("");
+
+  return (
+    <Input
+      placeholder={"Message"}
+      value={content}
+      onChange={(e) => setContent(e.target.value)}
+      onKeyPress={(e) => {
+        if (e.key == "Enter") {
+          addMessage(content);
+          setContent("");
+        }
+      }}
+    />
+  );
+}
+
+const Input = styled.input`
+  width: 100%;
+  margin-left: 8px;
+  margin-right: 8px;
+  margin-bottom: 4px;
+  height: 40px;
+  background: #eef2f5;
+  border-radius: 36px 16px 4px 36px;
+  border: 0px;
+  padding-left: 12px;
+  outline: none;
+
+  &:focus {
+    border: 1px solid grey;
+  }
+`;

packages/react-chat/src/components/Chat/ChatMessages.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useRef } from "react";
+import styled from "styled-components";
+
+import { ChatMessage } from "../models/ChatMessage";
+
+type ChatMessagesProps = {
+  messages: ChatMessage[];
+};
+
+export function ChatMessages({ messages }: ChatMessagesProps) {
+  const ref = useRef<HTMLHeadingElement>(null);
+  useEffect(() => {
+    if (ref && ref.current) {
+      ref.current.scrollTop = ref.current.scrollHeight;
+    }
+  }, [messages]);
+
+  return (
+    <MessagesWrapper ref={ref}>
+      {messages.map((message) => (
+        <MessageWrapper key={message.date.toDateString()}>
+          <IconWrapper>
+            <Icon />
+          </IconWrapper>
+          <ContentWrapper>
+            <MessageHeaderWrapper>
+              <UserNameWrapper>{message.sender}</UserNameWrapper>
+              <TimeWrapper>{message.date.toLocaleTimeString()}</TimeWrapper>
+            </MessageHeaderWrapper>
+            <MessageText>{message.content}</MessageText>
+          </ContentWrapper>
+        </MessageWrapper>
+      ))}
+    </MessagesWrapper>
+  );
+}
+
+const MessageText = styled.div`
+  overflow-wrap: anywhere;
+  width: 100%;
+`;
+
+const MessageHeaderWrapper = styled.div`
+  display: flex;
+`;
+
+const TimeWrapper = styled.div`
+  font-family: Inter;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 10px;
+  line-height: 14px;
+  letter-spacing: 0.2px;
+  text-transform: uppercase;
+  color: #939ba1;
+
+  text-align: center;
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-left: 4px;
+`;
+
+const UserNameWrapper = styled.div`
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 22px;
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Icon = styled.div`
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: blue;
+`;
+
+const IconWrapper = styled.div`
+  margin-left: 16px;
+  margin-right: 8px;
+`;
+
+const MessageWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  margin-top: 8px;
+  margin-bottom: 8px;
+`;
+
+const MessagesWrapper = styled.div`
+  height: calc(100% - 44px);
+  overflow: auto;
+`;

packages/react-chat/src/components/ChatBody.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-export function ChatBody() {
-  return <ChatBodyWrapper>Messages</ChatBodyWrapper>;
-}
-
-const ChatBodyWrapper = styled.div`
-  flex: 1;
-  height: 100%;
-  background: ${({ theme }) => theme.bodyBackgroundColor};
-`;

packages/react-chat/src/components/models/ChatMessage.ts

@@ -0,0 +1,5 @@
+export type ChatMessage = {
+  content: string;
+  date: Date;
+  sender: string;
+};