add form

src/components/list/index.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { Button, Icon } from "antd";
+
+export default ({ list }) => (
+	<div className="list">
+		{list.map(el => (
+			<div key={el.id} className="list__item">
+				<div className="list__info">
+					<div className="list__address">
+						<span className="list__origin">{el.origin}</span>
+						<Icon type="arrow-right" />
+						<span className="list__destination">{el.destination}</span>
+					</div>
+					<div className="list__driver">
+						<span className="list__driver-name">Контактное лицо: {el.contactName}</span>
+						<span className="list__driver-night">Тип рейса: {el.night ? "Ночьной" : "Дневной"}</span>
+						<span className="list__driver-body">Тип кузова: {el.bodyType}</span>
+					</div>
+				</div>
+				<div className="list__buttons">
+					<Button size="small" type="primary">
+						<Icon type="edit" />
+					</Button>
+					<Button size="small" type="danger">
+						<Icon type="close" />
+					</Button>
+				</div>
+			</div>
+		))}
+	</div>
+);

src/components/loadForm/index.js

@@ -0,0 +1,57 @@
+import React, { Component } from "react";
+
+export default class LoadForm extends Component {
+	render() {
+		return (
+			<div className="form">
+				<div className="form__input-box">
+					<label className="form__input-lable" htmlFor="origin">
+						Город отправитель
+						<input className="form__input" id="origin" type="text" />
+					</label>
+				</div>
+				<div className="form__input-box">
+					<label className="form__input-lable" htmlFor="destination">
+						Город получатель
+						<input className="form__input" id="destination" type="text" />
+					</label>
+				</div>
+				<div className="form__input-box">
+					<label className="form__input-lable" htmlFor="name">
+						Введите имя водителя
+						<input className="form__input" id="name" type="text" />
+					</label>
+				</div>
+
+				<div className="form__input-box">
+					<label className="form__input-lable" htmlFor="night">
+						Ночная перевозка ?
+						<input className="form__input" id="night" type="checkbox" />
+					</label>
+				</div>
+
+				<div className="form__input-box">
+					<label className="form__input-lable" htmlFor="bodyType">
+						Тип кузова
+						<select className="form__input" name="bodyType" id="bodyType">
+							<option value="type1">Тип 1</option>
+							<option value="type2">Тип 2</option>
+							<option value="type3">Тип 3</option>
+							<option value="type4">Тип 4</option>
+						</select>
+					</label>
+				</div>
+
+				<div className="form__input-box">
+					<label className="form__input-lable" htmlFor="load">
+						Груз
+						<input className="form__input" id="load" type="text" />
+					</label>
+				</div>
+				<div className="form__button-box">
+					<button className="form__submit-button">Создать Доставку</button>
+				</div>
+			</div>
+		);
+	}
+}

src/container/App.js

@@ -1,43 +1,35 @@
-import React, { Component } from "react";
+import React, { Component, Fragment } from "react";
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
 
-import { Button, Icon } from "antd";
-
 import * as actions from "../actions/todo";
+import List from "../components/list";
+import LoadForm from "../components/loadForm";
 
 class App extends Component {
+	state = {
+		openAddForm: false
+	};
+
+	openFormHandler = () => this.setState(prevState => ({ openAddForm: !prevState.openAddForm }));
+
 	render() {
 		const { list } = this.props;
+		const { openAddForm } = this.state;
 		return (
-			<div className="todo">
-				<div className="list">
-					{list.map(el => (
-						<div key={el.id} className="list__item">
-							<div className="list__info">
-								<div className="list__address">
-									<span className="list__origin">{el.origin}</span>
-									<Icon type="arrow-right" />
-									<span className="list__destination">{el.destination}</span>
-								</div>
-								<div className="list__driver">
-									<span className="list__driver-name">Контактное лицо: {el.contactName}</span>
-									<span className="list__driver-night">Тип рейса: {el.night ? "Ночьной" : "Дневной"}</span>
-									<span className="list__driver-body">Тип кузова: {el.bodyType}</span>
-								</div>
-							</div>
-							<div className="list__buttons">
-								<Button size="small" type="primary">
-									<Icon type="edit" />
-								</Button>
-								<Button size="small" type="danger">
-									<Icon type="close" />
-								</Button>
-							</div>
-						</div>
-					))}
+			<Fragment>
+				<h1 className="h1-tag">
+					Доставка грузов "to-do list" -{" "}
+					<span onClick={this.openFormHandler} className="h1-tag h1-tag--add">
+						Добавить груз
+					</span>
+				</h1>
+				<div className="todo">
+					<List list={list} />
+
+					{openAddForm && <LoadForm />}
 				</div>
-			</div>
+			</Fragment>
 		);
 	}
 }

src/index.css

@@ -1,14 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}

src/style/base/_typography.scss

@@ -0,0 +1,14 @@
+.h1-tag {
+	font-size: 3rem;
+	margin-bottom: 4rem;
+
+	&--add {
+		color: $color-blue-light-dark;
+		cursor: pointer;
+		margin-left: 2rem;
+
+		&:hover {
+			color: $color-blue-dark;
+		}
+	}
+}

src/style/components/_form.scss

@@ -0,0 +1,42 @@
+.form {
+	width: 60%;
+
+	&__input-box {
+		padding: 0 2rem;
+		width: 50%;
+
+		&:not(:last-child) {
+			margin-bottom: 2rem;
+		}
+	}
+
+	&__input-lable {
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 0.5rem;
+	}
+
+	&__input {
+		&:focus {
+			outline: none;
+		}
+	}
+
+	&__button-box {
+		display: flex;
+		justify-content: center;
+		margin-top: 4rem;
+	}
+
+	&__submit-button {
+		padding: 2rem;
+		border: none;
+		border-radius: 3px;
+		background-color: $color-green;
+		color: $color-white;
+
+		&:focus {
+			outline: none;
+		}
+	}
+}

src/style/components/_list.scss

@@ -2,6 +2,7 @@
 	width: 30%;
 	display: flex;
 	flex-direction: column;
+	margin-right: 20rem;
 
 	&__item {
 		display: flex;

src/style/index.scss

@@ -4,8 +4,10 @@
 @import "abstracts/mixins";
 
 @import "base/base";
+@import "base/typography";
 
 @import "layout/container";
 
 @import "components/list";
 @import "components/header";
+@import "components/form";

src/style/layout/container.scss

@@ -6,4 +6,5 @@
 
 .todo {
 	padding: 3rem;
+	display: flex;
 }