Commit 7e68f5d9 authored by Alexander Kotov's avatar Alexander Kotov

add message component

parent 487858b2
......@@ -2,34 +2,37 @@ import React, { Component } from 'react';
import './App.css';
import Header from './components/Header'
import Message from './components/Message';
class App extends Component {
user = {
name: 'Alexander Kotov'
}
messages = [
{
body: 'Welcome',
author: 'Alexander Kotov'
},
{
body: 'Hi',
author: 'Dima'
},
{
body: 'Cool!',
author: 'Taras'
}
]
render() {
return (
<div id="chat">
<Header user={this.user} />
<div id="messages">
<div class="message">
<img src="" alt="" />
<div class="info">
<div class="authorName">Alex Ko</div>
<div class="body">Welcome</div>
<div class="time">16:00</div>
</div>
</div>
<div class="message">
<img src="" alt="" />
<div class="info">
<div class="authorName">Dima</div>
<div class="body">Hi!</div>
<div class="time">16:05</div>
</div>
</div>
<Message message={this.messages[0]} />
<Message message={this.messages[1]} />
<Message message={this.messages[2]} />
</div>
<form id="message-form" autocomplete="off">
<input type="text" name="message" />
......
import React from 'react'
export default ({ message }) => {
return (
<div className="message">
<img src="" alt="" />
<div className="info">
<div className="authorName">{message.author}</div>
<div className="body">{message.body}</div>
<div className="time">16:00</div>
</div>
</div>
)
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment