remove ChatScreen.js

-import React from "react";
-import styled from "styled-components";
-import Header from "./Header";
-import Input from "./Input";
-import Button from "./Button";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faAddressBook,
-  faArrowDown,
-  faPlus,
-} from "@fortawesome/free-solid-svg-icons";
-
-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 1fr 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;
-`;
-
-export default ({ data }) => {
-  return (
-    <Wrapper>
-      <Header text={"KhuChat"} />
-      <ChatWrapper className="ChatWrapper">
-        <ChatMenuContainer>
-          <TitleContainer>
-            <Title>First Room</Title>
-          </TitleContainer>
-          <PeopleContainer>
-            <FontAwesomeIcon icon={faAddressBook} />
-            <ItemText>People</ItemText>
-          </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>
-                  <Input placeholder={"Enter any words"} />
-                  <Button text={"Submit"} />
-                </form>
-              </InputContainer>
-            </InputWrapper>
-          </ChatScreenBox>
-        </ChatScreenContainer>
-      </ChatWrapper>
-    </Wrapper>
-  );
-};