1import { useReactiveVar } from '@apollo/client';
2
3export function Cart() {
4  const cartItems = useReactiveVar(cartItemsVar);
5
6  return (
7    <div class="cart">
8      <Header>My Cart</Header>
9      {cartItems.length === 0 ? (
10        <p>No items in your cart</p>
11      ) : (
12        <Fragment>
13          {cartItems.map(productId => (
14            <CartItem key={productId} />
15          ))}
16        </Fragment>
17      )}
18    </div>
19  );
20}
21