Cart Component

import { CartProvider } from '@meaple/react-headless-components'
 
function App() {
  return (
    <CartProvider>
      <YourApp />
    </CartProvider>
  )
}

import { Cart } from '@meaple/react-headless-components'
 
function ShoppingCart() {
  return (
    <Cart>
      {({ items, total, addItem, removeItem, updateQuantity, clear }) => (
        <div>
          <h2>Cart ({items.length} items)</h2>
 
          {items.map(item => (
            <div key={item.id}>
              <span>{item.name}</span>
              <span>${item.price}</span>
              <input
                type="number"
                value={item.quantity}
                onChange={(e) => updateQuantity(item.id, +e.target.value)}
              />
              <button onClick={() => removeItem(item.id)}>Remove</button>
            </div>
          ))}
 
          <div>Total: ${total}</div>
          <button onClick={clear}>Clear Cart</button>
        </div>
      )}
    </Cart>
  )
}

interface CartRenderProps {
  items: CartItem[];
  total: number;
  itemCount: number;
  addItem: (item: CartItem) => void;
  removeItem: (itemId: string) => void;
  updateQuantity: (itemId: string, quantity: number) => void;
  clear: () => void;
  isEmpty: boolean;
}
 
interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
  ticketId?: string;
  eventId?: string;
}

function TicketSelector({ ticket }) {
  return (
    <Cart>
      {({ addItem }) => (
        <button
          onClick={() => addItem({
            id: ticket.id,
            name: ticket.name,
            price: ticket.price,
            quantity: 1,
            ticketId: ticket.id,
            eventId: ticket.eventId
          })}
        >
          Add to Cart
        </button>
      )}
    </Cart>
  )
}

function CartSummary() {
  return (
    <Cart>
      {({ itemCount, total, isEmpty }) => (
        <div>
          {isEmpty ? (
            <p>Your cart is empty</p>
          ) : (
            <>
              <p>{itemCount} items</p>
              <p>Total: ${total.toFixed(2)}</p>
            </>
          )}
        </div>
      )}
    </Cart>
  )
}

import { CartProvider } from '@meaple/react-headless-components'
 
function App() {
  return (
    <CartProvider persistKey="meaple-cart">
      <YourApp />
    </CartProvider>
  )
}

function CartBadge() {
  return (
    <Cart>
      {({ itemCount }) => (
        <div className="cart-icon">
          <ShoppingCartIcon />
          {itemCount > 0 && (
            <span className="badge">{itemCount}</span>
          )}
        </div>
      )}
    </Cart>
  )
}