\n Shopping Cart ({itemCount})\n

\n \n \n \n

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

\n {cart.length === 0 ? (\n

\n \n

Your cart is empty

\n \n Continue Shopping\n \n

\n ) : (\n

\n {cart.map(item => (\n

\n {/* Product Image */}\n {\n (e.target as HTMLImageElement).src = `data:image/svg+xml,`;\n }}\n />\n \n {/* Product Info */}\n

\n {item.product.name}\n

\n ${item.product.price.toFixed(2)} each\n

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

\n onUpdateQuantity(item.product.id, item.quantity - 1)}\n className=\"w-6 h-6 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center text-gray-600\"\n >\n \n \n \n \n {item.quantity}\n \n \n onUpdateQuantity(item.product.id, item.quantity + 1)}\n className=\"w-6 h-6 rounded-full bg-gray-200 hover:bg-gray-300 flex items-center justify-center text-gray-600\"\n >\n \n \n

\n \n {/* Item Total and Remove */}\n

\n ${(item.product.price * item.quantity).toFixed(2)}\n

\n onRemoveItem(item.product.id)}\n className=\"text-red-500 hover:text-red-700 text-sm mt-1\"\n >\n Remove\n \n

\n ))}\n

\n )}\n

\n\n {/* Footer */}\n {cart.length > 0 && (\n

\n {/* Total */}\n

\n Total:\n ${total.toFixed(2)}\n

\n \n {/* Checkout Button */}\n \n Proceed to Checkout\n \n \n {/* Continue Shopping */}\n \n Continue Shopping\n \n

\n )}\n

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