import React from "react";
import styled from "styled-components";

const TextBox = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0px 15px;
`;

const NickNameBox = styled.div`
  display: flex;
  margin-bottom: 5px;
`;

const NickName = styled.span`
  opacity: 0.8;
`;

const MsgPreviewBox = styled.div`
  display: flex;
`;

const MsgPreview = styled.span`
  opacity: 0.5;
`;

export default () => {
  return (
    <TextBox>
      <NickNameBox>
        <NickName>NickName</NickName>
      </NickNameBox>
      <MsgPreviewBox>
        <MsgPreview>MsgPreview...</MsgPreview>
      </MsgPreviewBox>
    </TextBox>
  );
};