Untitled
unknown
javascript
a year ago
2.3 kB
2
Indexable
Never
/* pages/index.js */ import React, { Component } from 'react'; import Layout from '../components/Layout'; class IndexPage extends Component { state = { user: null } handleKeyUp = evt => { if (evt.keyCode === 13) { const user = evt.target.value; this.setState({ user }); } } render() { const { user } = this.state; const nameInputStyles = { background: 'transparent', color: '#999', border: 0, borderBottom: '1px solid #666', borderRadius: 0, fontSize: '3rem', fontWeight: 500, boxShadow: 'none !important' }; return ( <Layout pageTitle="Realtime Chat"> <main className="container-fluid position-absolute h-100 bg-dark"> <div className="row position-absolute w-100 h-100"> <section className="col-md-8 d-flex flex-row flex-wrap align-items-center align-content-center px-5"> <div className="px-5 mx-5"> <span className="d-block w-100 h1 text-light" style={{marginTop: -50}}> { user ? (<span> <span style={{color: '#999'}}>Hello!</span> {user} </span>) : `What is your name?` } </span> { !user && <input type="text" className="form-control mt-3 px-3 py-2" onKeyUp={this.handleKeyUp} autoComplete="off" style={nameInputStyles} /> } </div> </section> <section className="col-md-4 position-relative d-flex flex-wrap h-100 align-items-start align-content-between bg-white px-0"></section> </div> </main> </Layout> ); } } export default () => ( <IndexPage /> );