Product not found

\n \n

\n );\n }\n\n const handleAddToCart = async () => {\n if (!selectedSize || !selectedColor) {\n alert('Please select size and color');\n return;\n }\n\n const success = await onAddToCart(product.id, selectedSize, selectedColor, quantity);\n if (success) {\n alert('Item added to cart!');\n }\n };\n\n return (\n

\n {/* Back button */}\n \n\n

\n {/* Product Images */}\n

\n {product.images[selectedImageIndex]}\n

\n \n {/* Image thumbnails */}\n

\n {product.images.map((image, index) => (\n setSelectedImageIndex(index)}\n className={`p-2 rounded-md border-2 transition-colors ${\n selectedImageIndex === index \n ? 'border-purple-500 bg-purple-50' \n : 'border-gray-200 hover:border-gray-300'\n }`}\n >\n

{image}

\n \n ))}\n

\n\n {/* Product Info */}\n

\n {product.name}\n

\n \n

{product.brand}

\n \n

\n \n ${product.price}\n \n {product.originalPrice && (\n \n ${product.originalPrice}\n \n )}\n

\n ⭐\n \n {product.rating} ({product.reviewCount} reviews)\n \n

\n\n

\n \n {product.category}\n \n

\n\n

\n {product.description}\n

\n\n {/* Size Selection */}\n

Size

\n {product.size.map(size => (\n setSelectedSize(size)}\n className={`py-2 px-4 border rounded-md text-center transition-colors ${\n selectedSize === size\n ? 'border-purple-500 bg-purple-50 text-purple-700'\n : 'border-gray-300 hover:border-gray-400'\n }`}\n >\n {size}\n \n ))}\n

\n\n {/* Color Selection */}\n

Color

\n {product.color.map(color => (\n setSelectedColor(color)}\n className={`py-2 px-4 border rounded-md transition-colors ${\n selectedColor === color\n ? 'border-purple-500 bg-purple-50 text-purple-700'\n : 'border-gray-300 hover:border-gray-400'\n }`}\n >\n {color}\n \n ))}\n

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

Quantity

\n setQuantity(Math.max(1, quantity - 1))}\n className=\"w-10 h-10 border border-gray-300 rounded-md flex items-center justify-center hover:bg-gray-50\"\n >\n -\n \n \n {quantity}\n \n setQuantity(quantity + 1)}\n className=\"w-10 h-10 border border-gray-300 rounded-md flex items-center justify-center hover:bg-gray-50\"\n >\n +\n \n

\n\n {/* Add to Cart Button */}\n \n {loading ? (\n

\n ) : (\n 'Add to Cart'\n )}\n \n\n {/* Product Features */}\n

Features

\n ✓\n Premium materials and construction\n
\n ✓\n Comfortable all-day wear\n
\n ✓\n Durable and long-lasting\n
\n ✓\n 30-day return policy\n

\n );\n}","deleted","label",[169,170,151],"frontend","components","permalink","https://www.val.town/x/Ruona26/Ecom/code/frontend/components/ProductDetailPage.tsx","extension","actionData","errors"]