Showing
1 changed file
with
60 additions
and
0 deletions
front/src/Components/Main/IncomingMsg.js
0 → 100644
1 | +import React from "react"; | ||
2 | +import styled from "styled-components"; | ||
3 | +import ImgIconBox from "../SubMenuList/ImgIconBox"; | ||
4 | + | ||
5 | +const IncomingBox = styled.div` | ||
6 | + display: flex; | ||
7 | + flex-direction: row; | ||
8 | + width: 100%; | ||
9 | + padding: 20px 10px; | ||
10 | + margin-top: 20px; | ||
11 | + margin-left: 10px; | ||
12 | +`; | ||
13 | + | ||
14 | +const MsgContainer = styled.div` | ||
15 | + display: flex; | ||
16 | + flex-direction: column; | ||
17 | + margin-left: 10px; | ||
18 | +`; | ||
19 | + | ||
20 | +const MsgBox = styled.div` | ||
21 | + background-color: #20bf6b; | ||
22 | + color: white; | ||
23 | + display: flex; | ||
24 | + justify-content: center; | ||
25 | + align-items: center; | ||
26 | + border-radius: 20px; | ||
27 | + margin-bottom: 10px; | ||
28 | +`; | ||
29 | + | ||
30 | +const Msg = styled.span` | ||
31 | + font-size: 20px; | ||
32 | + padding: 20px 10px; | ||
33 | +`; | ||
34 | + | ||
35 | +const TimeBox = styled.div` | ||
36 | + display: flex; | ||
37 | + justify-content: flex-start; | ||
38 | + align-items: center; | ||
39 | + opacity: 0.7; | ||
40 | +`; | ||
41 | + | ||
42 | +const Time = styled.span` | ||
43 | + font-size: 15px; | ||
44 | +`; | ||
45 | + | ||
46 | +export default () => { | ||
47 | + return ( | ||
48 | + <IncomingBox> | ||
49 | + <ImgIconBox /> | ||
50 | + <MsgContainer> | ||
51 | + <MsgBox> | ||
52 | + <Msg /> Incoming Message | ||
53 | + </MsgBox> | ||
54 | + <TimeBox> | ||
55 | + <Time /> Monday 00:00 | ||
56 | + </TimeBox> | ||
57 | + </MsgContainer> | ||
58 | + </IncomingBox> | ||
59 | + ); | ||
60 | +}; |
-
Please register or login to post a comment