import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import styled from 'styled-components';
import Button from './components/Button';
import AddTaskInput from './components/Input';
import MainHeader from './components/Header';
import Task from './components/Task';
const Wrapper = styled.section`
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
`
const HeaderWrapper = styled.header`
background: #9DB1CC;
`
const TasksWrapper = styled.div`
width: 90%;
margin: 0 auto;
padding-top: 30px;
&:last-child {
margin-bottom: 50px;
}
`
class App extends Component {
constructor(props) {
super(props);
this.state = {
items: 'Новая задача'
}
this.addTask = this.addTask.bind(this);
}
addTask () {
alert('1')
}
render() {
return (
<div className="App">
<HeaderWrapper>
<MainHeader />
</HeaderWrapper>
<Wrapper>
<AddTaskInput />
<Button onClick={this.addTask} text="Add" />
</Wrapper>
<TasksWrapper>
<Task taskName={this.state.items}/>
</TasksWrapper>
</div>
);
}
}
export default App;class App extends Component {
constructor(props) {
super(props);
this.state = {
items: 'Новая задача'
}
this.NewTask = this.NewTask.bind(this);
}
NewTask () {
alert(1)
}
render() {
return (
<div className="App">
<HeaderWrapper>
<MainHeader />
</HeaderWrapper>
<Wrapper>
<AddTaskInput />
<Button onClick={this.NewTask} text="Add" />
</Wrapper>
<TasksWrapper>
<Task taskName={this.state.items}/>
</TasksWrapper>
</div>
);
}
}
export default App;