{/* TODO: Display item count and total price */}

{/* TODO: Map through cart items and display each item */} {/* TODO: Add quantity controls and remove button for each item */}

{/* TODO: Add clear cart button */} {/* TODO: Add checkout button (different for authenticated vs guest users) */}

); } export default CartDisplay;22:T5a9,import React from 'react'; // TODO: Import context hooks import './ProductList.css'; const SAMPLE_PRODUCTS = [ { id: 1, name: 'Wireless Headphones', price: 99.99, image: '🎧' }, { id: 2, name: 'Smart Watch', price: 199.99, image: '⌚' }, { id: 3, name: 'Laptop Stand', price: 49.99, image: '💻' }, { id: 4, name: 'Coffee Mug', price: 19.99, image: '☕' }, ]; function ProductList() { // TODO: Use context hooks to get state and functions // TODO: Create helper function to get item quantity return (

Products

{/* TODO: Add personalized message for authenticated users */}

{SAMPLE_PRODUCTS.map(product => (

{product.image}

{product.name}

${product.price}

{/* TODO: Add button to add product to cart */} {/* TODO: Show quantity indicator if item is in cart */}