sdy

create TextBox.js

1 +import React from "react";
2 +import styled from "styled-components";
3 +
4 +const TextBox = styled.div`
5 + display: flex;
6 + flex-direction: column;
7 + justify-content: flex-start;
8 + align-items: flex-start;
9 + padding: 0px 15px;
10 +`;
11 +
12 +const NickNameBox = styled.div`
13 + display: flex;
14 + margin-bottom: 5px;
15 +`;
16 +
17 +const NickName = styled.span`
18 + opacity: 0.8;
19 +`;
20 +
21 +const MsgPreviewBox = styled.div`
22 + display: flex;
23 +`;
24 +
25 +const MsgPreview = styled.span`
26 + opacity: 0.5;
27 +`;
28 +
29 +export default () => {
30 + return (
31 + <TextBox>
32 + <NickNameBox>
33 + <NickName>NickName</NickName>
34 + </NickNameBox>
35 + <MsgPreviewBox>
36 + <MsgPreview>MsgPreview...</MsgPreview>
37 + </MsgPreviewBox>
38 + </TextBox>
39 + );
40 +};