2020-1-capstone-design1 / Triz_Project1

Go to a project
Toggle navigation Toggle navigation pinning
sdy
5cac29cc 1 parent b9207646

remove ChatScreen.js

Inline Side-by-side
Showing 1 changed file with 0 additions and 201 deletions
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>
);
};