diff --git a/src/components/app/app.js b/src/components/app/app.js
index 3124600..a057cf0 100644
--- a/src/components/app/app.js
+++ b/src/components/app/app.js
@@ -2,12 +2,14 @@ import { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Restaurants from '../restaurants';
import Header from '../header';
+import Cart from '../cart/cart';
export default class App extends PureComponent {
render() {
return (
+
);
diff --git a/src/components/cart/cart.js b/src/components/cart/cart.js
new file mode 100644
index 0000000..f80acb3
--- /dev/null
+++ b/src/components/cart/cart.js
@@ -0,0 +1,28 @@
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import styles from './cart.module.css';
+
+import Button from '../button';
+
+function Cart({ products, decrement, increment }) {
+ console.log(products);
+ return (
+
+
Cart
+
+ {Object.keys(products).map((key, amount) => (
+ -
+
{key}
+ {products[key]}
+
+ ))}
+
+
+ );
+}
+
+const mapStateToProps = (state, props) => ({
+ products: state.order,
+});
+
+export default connect(mapStateToProps)(Cart);
diff --git a/src/components/cart/cart.module.css b/src/components/cart/cart.module.css
new file mode 100644
index 0000000..76fb821
--- /dev/null
+++ b/src/components/cart/cart.module.css
@@ -0,0 +1,24 @@
+.cart {
+ position: absolute;
+ right: 20px;
+ top: 20px;
+ background-color: #fff;
+ padding: 20px;
+ z-index: 100;
+ width: 400px;
+}
+
+.cart h2 {
+ text-align: center;
+}
+
+.cart ul {
+ padding: 0;
+}
+
+.product {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+}
diff --git a/src/components/cart/index.js b/src/components/cart/index.js
new file mode 100644
index 0000000..e15cd80
--- /dev/null
+++ b/src/components/cart/index.js
@@ -0,0 +1 @@
+export { default } from './cart';