rendering selected items onto the cart element

Author: AdityaKumawat97

src/components/cart-dropdown/cart-dropdown.component.jsx

@@ -1,12 +1,22 @@
 import React from 'react'
+import CartItem from '../cart-item/cart-item.component'
+import { connect } from 'react-redux'
 import CustomButton from '../custom-button/custom-button.component'
 import './cart-dropdown.styles.scss'
-export default function CartDropdown() {
-    return (
-        <div className="cart-dropdown">
-            <div className="cart-item">
-                <CustomButton>GO TO CHECKOUT</CustomButton>
-            </div>
+const CartDropdown = ({ cartItems }) => (
+    <div className="cart-dropdown">
+        <div className="cart-items">
+            {
+                cartItems.map(cartItem => <CartItem key={cartItem.id} item={cartItem} />)
+            }
         </div>
-    )
-}
+        <CustomButton>GO TO CHECKOUT</CustomButton>
+    </div>)
+
+
+
+const mapStateToProps = ({ cart: { cartItems } }) => ({
+    cartItems
+})
+
+export default connect(mapStateToProps)(CartDropdown)

src/components/cart-dropdown/cart-dropdown.styles.scss

@@ -1,7 +1,7 @@
 .cart-dropdown {
     position: absolute;
     width: 240px;
-    height: auto;
+    height: 340px;
     display: flex;
     flex-direction: column;
     padding: 20px;
@@ -12,14 +12,14 @@
     z-index: 5;
 
     .cart-items {
+        width: 100%;
         height: 240px;
         display: flex;
         flex-direction: column;
-        overflow: scroll;
+        overflow-y: scroll;
     }
 
     button {
-        width: 100%;
         margin-top: auto;
     }
 }

src/components/cart-item/cart-item.component.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import './cart-item.styles.scss'
+function CartItem({ item: { imageUrl, price, name, quantity } }) {
+    return (
+        <div className="cart-item">
+            <img src={imageUrl} alt={name} />
+            <div className="item-details">
+                <span className="name">{name}</span>
+                <span className="price">{quantity}*${price}</span>
+            </div>
+        </div>
+    )
+}
+
+export default CartItem

src/components/cart-item/cart-item.styles.scss

@@ -0,0 +1,23 @@
+.cart-item {
+    width: 100%;
+    display: flex;
+    height: 80px;
+    margin-bottom: 15px;
+
+    img {
+        width: 30%;
+    }
+
+    .item-details {
+        width: 70%;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        padding: 10px 20px;
+
+        .name {
+            font-size: 16px;
+        }
+    }
+}