\n {/* Header */}\n

Shopping Cart

\n\n {/* Empty State */}\n

🛒

Your cart is empty

\n Looks like you haven't added anything to your cart yet.\n

\n navigateTo('categories')}\n className=\"btn-primary w-full\"\n >\n Start Shopping\n \n

\n );\n }\n\n return (\n

\n {/* Header */}\n

\n Shopping Cart ({cartItems.length})\n

\n\n {/* Cart Items */}\n

\n {cartItems.map((item) => (\n

\n {/* Product Image */}\n

\n \n

\n\n {/* Product Details */}\n

\n {item.product.name}\n

{item.product.brand}

\n \n {/* Size and Color */}\n

\n Size:\n {item.size}\n

\n Color:\n {item.color}\n

\n\n {/* Price and Quantity */}\n

\n {/* Quantity Controls */}\n

\n handleQuantityChange(item, item.quantity - 1)}\n className=\"p-2 hover:bg-gray-100 tap-target\"\n >\n −\n \n \n {item.quantity}\n \n handleQuantityChange(item, item.quantity + 1)}\n className=\"p-2 hover:bg-gray-100 tap-target\"\n >\n +\n \n

\n\n {/* Price */}\n

\n {formatPrice(item.product.price * item.quantity)}\n

\n {formatPrice(item.product.price)} each\n

\n\n {/* Remove Button */}\n removeFromCart(item.id)}\n className=\"flex-shrink-0 text-gray-400 hover:text-red-500 tap-target\"\n >\n 🗑️\n \n

\n ))}\n\n {/* Promo Code */}\n

Promo Code

\n \n \n

\n\n {/* Order Summary */}\n

\n Subtotal\n {formatPrice(subtotal)}\n

\n Tax\n {formatPrice(tax)}\n

\n Shipping\n \n {shipping === 0 ? 'Free' : formatPrice(shipping)}\n \n

\n {shipping === 0 && (\n

\n 🎉 You qualify for free shipping!\n

\n )}\n

\n Total\n {formatPrice(total)}\n

\n\n \n Proceed to Checkout\n \n\n navigateTo('categories')}\n className=\"w-full mt-3 py-3 text-center text-indigo-600 font-medium hover:text-indigo-700\"\n >\n Continue Shopping\n \n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/Adesanya/Job/code/frontend/components/Cart.tsx","extension","actionData","errors"]