ADD: little real time shopping cart icon

src/assets/images/shopping-cart-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="shopping-cart" class="svg-inline--fa fa-shopping-cart fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z"></path></svg>

src/assets/index.js

@@ -1,4 +1,6 @@
 import plc  from "./images/B1-14MR2-D24.jpg";
 import w2c from "./images/W2C.jpg";
 import banner from "./images/banner-plc.png"
-export { plc, w2c, banner }; 
+import carticon from "./images/shopping-cart-solid.svg"
+
+export { plc, w2c, banner, carticon } ; 

src/components/cart/cartIcon.css

@@ -0,0 +1,70 @@
+.top-menu{
+    color: white;
+    background-color: navy;
+    padding-top: 4rem;
+    position: relative;
+    bottom: 0;
+    width: 100%;
+    height: 40px;
+    text-align: center;
+}
+
+svg {
+  display: block;
+  width: 60px;
+  z-index: 0;
+  position: absolute;
+  left: 3.4rem;
+  right: 1 rem;
+  bottom: 5px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.cart-badge {
+  position: absolute;
+  left: 75px;
+  bottom: 30px;
+  display: block;
+  width: 27px;
+  height: 27px;
+  font-size: 1rem;
+  font-weight: light;
+  font-family: "Trebuchet MS", sans-serif;
+  text-transform: uppercase;
+  text-align: center;
+  line-height: 1.8rem;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  background: #b91538;
+  cursor: pointer;
+  box-shadow: 0 0 0 0 rgba(#fff, 0.3);
+  z-index: 50;
+}
+
+.cart-price {
+    position: absolute;
+    left: 110px;
+    bottom: 25px;
+    display: block;
+    width: 25px;
+    height: 25px;
+    font-size: 1.2rem;
+    font-weight: bold;
+    font-family: "Trebuchet MS", sans-serif;
+    text-transform: uppercase;
+    text-align: center;
+    line-height: 1.8rem;
+    color: rgb(90, 214, 245);
+    border: none;
+    /* border-radius: 50%;
+    background: #b91538; */
+    cursor: pointer;
+    box-shadow: 0 0 0 0 rgba(#fff, 0.3);
+    z-index: 50;
+  }
+
+.st0 {
+  fill: #ffffff;
+}

src/components/cart/cartIcon.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+// import { carticon } from "../../assets";
+import "./cartIcon.css";
+
+let ShoppingCartIcon = () => {
+  return (
+    <svg x="0px" y="0px" viewBox="0 0 202 167.3">
+      <g>
+        <g>
+          <path
+            className="st0"
+            d="M156.5,107.5H66.5c-3.4,0-6.3-2.4-7-5.6L45.8,37.2l-12.9-1c-3.9-0.3-6.9-3.7-6.6-7.6c0.3-3.9,3.7-6.9,7.6-6.6l18.3,1.4c3.2,0.2,5.8,2.5,6.4,5.6l13.7,64.2h78.4L161,45.5c0.8-3.9,4.6-6.3,8.5-5.5c3.9,0.8,6.3,4.6,5.5,8.5l-11.5,53.4C162.7,105.1,159.8,107.5,156.5,107.5z"
+          />
+        </g>
+        <circle className="st0" cx="82.1" cy="130.8" r="14.2" />
+        <circle className="st0" cx="142" cy="130.8" r="14.2" />
+      </g>
+    </svg>
+  );
+};
+
+const CartIcon = ({ count, total }) => {
+  return (
+    <div className="container">
+      <div className="top-menu">
+        <div className="col">
+          <span className="cart-badge" value="0">
+            {count}
+          </span>
+          <ShoppingCartIcon />
+          <span className="cart-price" value="0">
+            ${total}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CartIcon;

src/components/cart/index.js

@@ -0,0 +1 @@
+export {default as CartIcon} from './cartIcon';

src/components/mainPage/landing.jsx

@@ -1,13 +1,28 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import "./home.css";
 import { PayPal, Purchase, ShowCase, Home } from ".";
 import { AllProducts } from "../products";
 import { Orders } from "../orders";
+import { CartIcon } from '../cart';
 
 // component
 const Details = () => {
   const [cart, setCart] = useState([]);
   const [orderID, setOrderID] = useState(null);
+  const [total, setTotal] = useState(0);
+
+  // refresh the cart logo and amount of the cart
+  useEffect(() => {
+
+    let sub_total = cart.reduce((sum, it)=>{
+      console.log(it.price);
+      return it.price+sum
+    },0);
+
+    setTotal(sub_total);
+
+    console.log("effect", total)
+  },[cart, total]);
 
   return (
     <>
@@ -15,8 +30,10 @@ const Details = () => {
       {/* you can try 600011 in orderID */}
       <Orders orderID={orderID} setOrderID={setOrderID} />
       <AllProducts setCart={setCart} />
+      <CartIcon count={cart?.length} total={total}   />
       <Purchase />
       <PayPal cart={cart} />
+
     </>
   );
 };