React

by IPWright83

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
.message {
    background: #ffffff;
    border-radius: 4px;
    padding: 20px;
    min-height: 70px;
}

.gutter {
    width: 70px;
    padding-right: 8px;
    float: left;
    height: 100%;
}

.avatar {
    border-radius: 3px;
    height: 64px;
    width: 64px;
    line-height: 64px;
}

.username {
    color: #2c2d30;
    display: inline-block;
    text-decoration-color: #2c2d30;
    text-decoration-style: solid;
    font-weight: 900;
    font-family: NotoSansJP, Slack-Lato, appleLogo, sans-serif;
}

.timestamp {
    color: #717274;
    font-size: 12px;
    line-height: 12px;
    margin-left: 10px;
    font-family: NotoSansJP, Slack-Lato, appleLogo, sans-serif;
}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    
    const message = {
    	avatarUrl: "https://ca.slack-edge.com/TDGL0NYUE-UDFBFU1MY-gaf60a40ce3b-48",
        username: "Ian Wright",
        timestamp: new Date(1541367608746),
    };
    
    this.state = message;
    
   /*  this.state = {
        items: [
          { text: "Learn JavaScript", done: false },
        { text: "Learn React", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ]
    } */
  }
  
  render() {
    return (
      <div className="message">
          <div className="gutter">
              <a href="/team/U0XNLP17F">
                <img class="avatar" src={this.state.avatarUrl} />
              </a>
          </div>
          
          <div>
            <span class="sender">
                <a class="username" href="/team/U0XNLP17F">{this.state.username}</a>
            </span>
            <a>
                <span class="timestamp">14:53</span>
            </a>
         </div>
       </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))