handleCloseCart()

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

function CartSidebar() {
  const { handleCloseCart, shouldDisplayCart } = useShoppingCart()

  if (!shouldDisplayCart) return null

  return (
    <div className="cart-sidebar">
      <button onClick={handleCloseCart} className="close-button">
        ×
      </button>
      {/* Cart contents */}
    </div>
  )
}

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

function CartOverlay() {
  const { handleCloseCart, shouldDisplayCart, cartDetails } = useShoppingCart()

  if (!shouldDisplayCart) return null

  return (
    <>
      {/* Backdrop - click to close */}
      <div className="fixed inset-0 bg-black/50" onClick={handleCloseCart} />

      {/* Cart Sidebar */}
      <div className="fixed right-0 top-0 h-full w-96 bg-white shadow-xl">
        <div className="p-4">
          <div className="flex justify-between items-center mb-4">
            <h2>Your Cart</h2>
            <button onClick={handleCloseCart}>×</button>
          </div>

          {Object.entries(cartDetails).map(([id, item]) => (
            <div key={id}>
              <span>{item.name}</span>
            </div>
          ))}
        </div>
      </div>
    </>
  )
}

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

function CartModal() {
  const { handleCloseCart, shouldDisplayCart } = useShoppingCart()

  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        handleCloseCart()
      }
    }

    if (shouldDisplayCart) {
      window.addEventListener('keydown', handleEscape)
      return () => window.removeEventListener('keydown', handleEscape)
    }
  }, [shouldDisplayCart, handleCloseCart])

  if (!shouldDisplayCart) return null

  return <div className="cart-modal">{/* Cart content */}</div>
}