From bb49580db442b0b71329737fe85d257857a32542 Mon Sep 17 00:00:00 2001
From: webAqemu <notych2812@gmail.com>
Date: Thu, 9 Dec 2021 22:38:52 +0300
Subject: [PATCH] Add Cart component

---
 src/components/app/app.js           |  2 ++
 src/components/cart/cart.js         | 28 ++++++++++++++++++++++++++++
 src/components/cart/cart.module.css | 24 ++++++++++++++++++++++++
 src/components/cart/index.js        |  1 +
 4 files changed, 55 insertions(+)
 create mode 100644 src/components/cart/cart.js
 create mode 100644 src/components/cart/cart.module.css
 create mode 100644 src/components/cart/index.js

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