mirror of https://github.com/waku-org/js-waku.git
Display lines
This commit is contained in:
parent
8942f0eca1
commit
c5ea01bcb4
|
@ -1,24 +1,13 @@
|
|||
import React from 'react';
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import Log from './Log';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
<div className="chat-log">
|
||||
<Log />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,41 @@
|
|||
import React from 'react';
|
||||
|
||||
interface Props {
|
||||
}
|
||||
|
||||
interface State {
|
||||
lines: string[];
|
||||
}
|
||||
|
||||
export default class Log extends React.Component<Props, State> {
|
||||
state: State = {
|
||||
lines: [
|
||||
'here',
|
||||
'is',
|
||||
'a',
|
||||
'line'
|
||||
]
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='log'>
|
||||
{this.renderLines()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderLines() {
|
||||
|
||||
const lines = [];
|
||||
for (const line of this.state.lines) {
|
||||
lines.push(<div className='log-row'>{line}</div>);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{lines}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -11,3 +11,14 @@ code {
|
|||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
.log-row {
|
||||
text-align: left;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.log-row:after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue