ChatScreen.js
2.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
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, faMusic } 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;
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 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``;
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>
<FontAwesomeIcon icon={faMusic} />
<ItemText>Music</ItemText>
</CategoryContainer>
</ChatMenuContainer>
<ChatScreenContainer>
<ChatScreenHeader>
<Title>Selected Menu Title</Title>
</ChatScreenHeader>
<ChatScreenBox>
<Input placeholder={"Enter any words"} />
<Button text={"Submit"} />
</ChatScreenBox>
</ChatScreenContainer>
</ChatWrapper>
</Wrapper>
);
};