create ChatPresenter.js

+import React from "react";
+import styled from "styled-components";
+import Header from "../../Components/Header";
+import Input from "../../Components/Input";
+import Button from "../../Components/Button";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faAddressBook,
+  faArrowDown,
+  faPlus,
+} from "@fortawesome/free-solid-svg-icons";
+import { Link } from "react-router-dom";
+
+const Wrapper = styled.div`
+  display: grid;
+  width: 100%;
+  height: 100%;
+  grid-template-rows: 80px auto min-content;
+  grid-template-areas:
+    "Header"
+    "Workspace";
+  .Header {
+    box-shadow: none;
+  }
+`;
+
+const ChatWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  grid-template-columns: 200px auto;
+  grid-area: "Workspace";
+`;
+
+const ChatMenuContainer = styled.div`
+  display: grid;
+  width: 200px;
+  height: 100%;
+  background-color: #667aff;
+  color: white;
+  grid-template-rows: 80px 80px 1fr;
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
+`;
+
+const Title = styled.span`
+  font-family: "Chelsea Market", cursive;
+`;
+
+const ItemText = styled.span`
+  font-family: "Ubuntu", sans-serif;
+`;
+
+const PeopleContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  svg {
+    font-size: 20px;
+  }
+  span {
+    margin-left: 10px;
+    font-size: 20px;
+  }
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
+`;
+
+const CategoryContainer = styled.div`
+  display: flex;
+  svg {
+    font-size: 20px;
+  }
+  span {
+    margin-left: 10px;
+    font-size: 20px;
+  }
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
+`;
+
+const ItemListContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 15px;
+`;
+
+const ItemList = styled.ul`
+  align-items: center;
+  svg {
+    margin: 0px 10px;
+  }
+`;
+
+const Item = styled.li``;
+
+const ChatScreenContainer = styled.div`
+  display: grid;
+  width: 100%;
+  height: 100%;
+  grid-template-rows: 70px 1fr;
+`;
+
+const ChatScreenHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+`;
+
+const ChatScreenBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`;
+
+const InputWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  margin-bottom: 10px;
+  width: 100%;
+`;
+
+const InputContainer = styled.div`
+  position: fixed;
+  bottom: 0;
+  padding: 10px;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  width: 70%;
+  form {
+    width: 100%;
+    button {
+      background-color: #27ae60;
+      width: 10%;
+      color: white;
+      border-radius: 10px;
+    }
+    input {
+      width: 70%;
+    }
+  }
+  border: 1px solid rgba(0, 0, 0, 0.7);
+  border-radius: 10px;
+`;
+
+const StyledLink = styled(Link)`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  color: white;
+  cursor: pointer;
+  &:hover {
+    background-color: white;
+    color: #667aff;
+  }
+`;
+
+export default ({ data, location, message, onSubmit }) => {
+  const { pathname } = location;
+  const roomName = pathname.slice(1, pathname.length);
+  return (
+    <Wrapper>
+      <Header text={"KhuChat"} />
+      <ChatWrapper className="ChatWrapper">
+        <ChatMenuContainer>
+          <TitleContainer>
+            <Title>{roomName} Room</Title>
+          </TitleContainer>
+          <PeopleContainer>
+            <StyledLink to="People">
+              <FontAwesomeIcon icon={faAddressBook} />
+              <ItemText>People</ItemText>
+            </StyledLink>
+          </PeopleContainer>
+          <CategoryContainer>
+            <ItemListContainer>
+              <ItemList>
+                <FontAwesomeIcon icon={faArrowDown} /> Category
+                <FontAwesomeIcon icon={faPlus} />
+                <Item>
+                  <ItemText># Music</ItemText>
+                </Item>
+              </ItemList>
+            </ItemListContainer>
+          </CategoryContainer>
+        </ChatMenuContainer>
+        <ChatScreenContainer>
+          <ChatScreenHeader>
+            <Title>Selected Menu Title</Title>
+          </ChatScreenHeader>
+          <ChatScreenBox>
+            <InputWrapper>
+              <InputContainer>
+                <form onSubmit={onSubmit}>
+                  <Input
+                    placeholder={"Enter any words"}
+                    type="text"
+                    {...message}
+                  />
+                  <Button text={"Submit"} />
+                </form>
+              </InputContainer>
+            </InputWrapper>
+          </ChatScreenBox>
+        </ChatScreenContainer>
+      </ChatWrapper>
+    </Wrapper>
+  );
+};