Chat layout

src/App.js

@@ -1,13 +1,22 @@
 import React, { Component } from 'react'
-import logo from './logo.svg'
-import './App.css'
+import './styles/css/index.css'
+import Chat from './components/Chat'
+import ChatList from './components/ChatList'
+import ChatHeader from './components/ChatHeader'
 
 class App extends Component {
   constructor() {
     super()
     this.state = {
       msg: '',
-      username: ''
+      username: 'lusac',
+      rooms: [
+        {name: 'sala 1'},
+        {name: 'sala 2'},
+        {name: 'sala 3'},
+        {name: 'sala 4'},
+        {name: 'sala 5'}
+      ]
     }
   }
 
@@ -91,14 +100,19 @@ class App extends Component {
     if (this.state.username) {
       return (
         <div>
-          <small>Olá {this.state.username}!</small>
-          <form onSubmit={this.onMsgSubmit.bind(this)}>
+          <div className="chat">
+            <ChatHeader username={this.state.username} />
+            <ChatList rooms={this.state.rooms}/>
+            <Chat />
+          </div>
+
+          {/* <form onSubmit={this.onMsgSubmit.bind(this)}>
             <label>
               Msg:
               <input type="text" value={this.state.msg} onChange={this.onMsgChange.bind(this)} />
             </label>
             <input type="submit" value="Submit" />
-          </form>
+          </form> */}
         </div>
       )
     }
@@ -107,10 +121,6 @@ class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
         {this.renderChooseName()}
         {this.renderChatRooms()}
       </div>

src/components/Chat/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+class Chat extends React.Component {
+  render() {
+    return (
+      <div className="chat-room">
+        <div className="chat-room__messages">
+          oie
+        </div>
+
+        <div className="chat-room__input__wrapper">
+          <input placeholder="escreva uma mensagem" className="chat-room__input"/>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Chat;

src/components/ChatHeader/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class ChatHeader extends React.Component {
+  render() {
+    return (
+      <div className="chat-header">
+        <div className="chat-header__profile">
+            Olá {this.props.username}!
+        </div>
+
+        <div className="chat-header__chat-name">
+          chat 1
+        </div>
+      </div>
+    )
+  }
+}
+
+ChatHeader.propTypes = {
+  username: PropTypes.string,
+  chatName: PropTypes.string
+};
+
+export default ChatHeader;

src/components/ChatList/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class ChatList extends React.Component {
+  render() {
+    return (
+      <div className="chat-list">
+        {this.props.rooms.map(function(room, i) {
+          return (<span key={i} className="chat-list__item">{room.name}</span>)
+        })}
+      </div>
+    )
+  }
+}
+
+ChatList.propTypes = {
+  rooms: PropTypes.array
+};
+
+export default ChatList;

src/styles/scss/Base.scss

@@ -0,0 +1,16 @@
+* {
+  box-sizing: border-box;
+}
+
+body, html {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.chat {
+  display: grid;
+  grid-template-areas:
+    "header header header"
+    "list room room"
+}

src/styles/scss/ChatHeader.scss

@@ -0,0 +1,18 @@
+.chat-header {
+  height: 50px;
+  color: #FFF;
+  padding: 10px;
+  display: grid;
+  grid-area: header;
+  align-items: center;
+  background: cadetblue;
+  grid-template-areas: "header-profile header-chat-name header-chat-name";
+
+  &__profile {
+    grid-area: header-profile;
+  }
+
+  &__chat-name {
+    grid-area: header-chat-name;
+  }
+}

src/styles/scss/ChatList.scss

@@ -0,0 +1,22 @@
+.chat-list {
+  grid-area: list;
+  display: flex;
+  flex-direction: column;
+
+  &__item {
+    height: 50px;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid #EEE;
+
+    &:hover {
+      background: #EFEFEF;
+    }
+
+    &:first-child {
+      border-top: 1px solid #EEE;
+    }
+  }
+}

src/styles/scss/ChatRoom.scss

@@ -0,0 +1,22 @@
+.chat-room {
+  grid-area: room;
+  background: beige;
+  border: 1px solid #EEE;
+
+  &__messages {
+    height: 75%;
+    padding: 10px;
+  }
+
+  &__input {
+    width: 85%;
+    height: 100%;
+    outline: none;
+    padding: 10px;
+
+    &__wrapper {
+      height: 25%;
+      padding: 10px;
+    }
+  }
+}

src/styles/scss/index.scss

@@ -0,0 +1,4 @@
+@import 'Base';
+@import 'ChatHeader';
+@import 'ChatRoom';
+@import 'ChatList';