Showing
4 changed files
with
76 additions
and
0 deletions
front/src/Components/Main/Bubble.js
0 → 100644
front/src/Components/Main/ChatFooter.js
0 → 100644
front/src/Components/Main/ChatHeader.js
0 → 100644
1 | +import React from "react"; | ||
2 | +import styled from "styled-components"; | ||
3 | +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
4 | +import { faPhone, faEllipsisH } from "@fortawesome/free-solid-svg-icons"; | ||
5 | + | ||
6 | +const ChatHeader = styled.div` | ||
7 | + width: 100%; | ||
8 | + display: flex; | ||
9 | + justify-content: space-around; | ||
10 | + align-items: center; | ||
11 | + border-bottom: 1px solid; | ||
12 | +`; | ||
13 | + | ||
14 | +const NickNameBox = styled.div` | ||
15 | + display: flex; | ||
16 | + flex-direction: column; | ||
17 | + padding: 10px; | ||
18 | + opacity: 0.8; | ||
19 | +`; | ||
20 | + | ||
21 | +const NickName = styled.span` | ||
22 | + font-size: 20px; | ||
23 | +`; | ||
24 | + | ||
25 | +const IconBox = styled.div` | ||
26 | + display: flex; | ||
27 | + flex-direction: row; | ||
28 | + justify-content: space-between; | ||
29 | + align-items: center; | ||
30 | + opacity: 0.8; | ||
31 | +`; | ||
32 | + | ||
33 | +export default () => { | ||
34 | + return ( | ||
35 | + <ChatHeader> | ||
36 | + <NickNameBox> | ||
37 | + <NickName /> NickName | ||
38 | + </NickNameBox> | ||
39 | + <IconBox> | ||
40 | + <FontAwesomeIcon icon={faPhone} /> | ||
41 | + <FontAwesomeIcon icon={faEllipsisH} /> | ||
42 | + </IconBox> | ||
43 | + </ChatHeader> | ||
44 | + ); | ||
45 | +}; |
front/src/Components/Main/ChatScreen.js
0 → 100644
-
Please register or login to post a comment