Add Cart component

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 (
       <div>
         <Header />
+        <Cart />
         <Restaurants restaurants={this.props.restaurants} />
       </div>
     );

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 (
+    <div className={styles.cart}>
+      <h2>Cart</h2>
+      <ul>
+        {Object.keys(products).map((key, amount) => (
+          <li className={styles.product} key={key}>
+            <div className={styles.name}>{key}</div>
+            <div className={styles.amount}>{products[key]}</div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+const mapStateToProps = (state, props) => ({
+  products: state.order,
+});
+
+export default connect(mapStateToProps)(Cart);

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;
+}

src/components/cart/index.js

@@ -0,0 +1 @@
+export { default } from './cart';