I'm working on a Book Store project. For most of the functionality, I have finished my video tutorial. I can add the book to order(main page only, not on the basket) there is another empty cart page. I want to expand the app by adding books to the basket and by adding a counter on the basket logo. Please help, I'm new to the Redux library. Github if need https://github.com/Raccoondriver/Javascript-Projects/tree/main/book-app

shop-header.js

import React from 'react';
import {Link} from 'react-router-dom'
import './shop-header.css';
const ShopHeader = ({ numItems, total}) => {
  return (
    <header className="shop-header row">
        <Link to= "/">
      <div className="logo text-dark">ReStore</div>
      </Link>
      <Link to="/cart">
      <div className="shopping-cart">
        <i className="cart-icon fa fa-shopping-cart" />
       
        {numItems} items (${total})
      </div>
      </Link>
    </header>
  );
};

export default ShopHeader;

shop-header.css

.shop-header {
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
}

.shop-header .logo {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 2.5rem;
    padding-left: 1rem;
}

.shop-header .shopping-cart {
    align-self: center;
    font-size: 1.3rem;
    padding-right: 1rem;
}

.shop-header .shopping-cart .cart-icon {
    font-size: 2.2rem;
    color: cadetblue;
    margin-right: 10px;
}