handleCartHover()

import { useShoppingCart } from 'use-shopping-cart'

function CartButton() {
  const { handleCartHover, handleCloseCart, cartCount } = useShoppingCart()

  return (
    <div
      onMouseEnter={handleCartHover}
      onMouseLeave={handleCloseCart}
      className="cart-trigger"
    >
      <button>Cart ({cartCount})</button>
    </div>
  )
}

import { useShoppingCart } from 'use-shopping-cart'

function Header() {
  const {
    handleCartHover,
    handleCloseCart,
    shouldDisplayCart,
    cartCount,
    cartDetails
  } = useShoppingCart()

  return (
    <header>
      <div
        onMouseEnter={handleCartHover}
        onMouseLeave={handleCloseCart}
        className="relative"
      >
        <button className="cart-button">Cart ({cartCount})</button>

        {shouldDisplayCart && (
          <div className="cart-dropdown">
            {cartCount === 0 ? (
              <p>Your cart is empty</p>
            ) : (
              <div>
                {Object.entries(cartDetails).map(([id, item]) => (
                  <div key={id}>
                    <span>{item.name}</span>
                    <span>×{item.quantity}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </div>
    </header>
  )
}