\n Loading products...\n

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

\n {/* Search and Filter Section */}\n

\n {/* Search */}\n \n\n {/* Category Filter */}\n

\n onCategoryFilter('')}\n className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${\n !selectedCategory\n ? 'bg-blue-600 text-white'\n : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\n }`}\n >\n All Categories\n \n {categories.map(category => (\n onCategoryFilter(category)}\n className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${\n selectedCategory === category\n ? 'bg-blue-600 text-white'\n : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\n }`}\n >\n {category}\n \n ))}\n

\n\n {/* Clear Filters */}\n {(searchQuery || selectedCategory) && (\n \n Clear filters\n \n )}\n

\n\n {/* Active Filters Display */}\n {(searchQuery || selectedCategory) && (\n

\n Active filters:\n {searchQuery && (\n \n Search: \"{searchQuery}\"\n \n )}\n {selectedCategory && (\n \n Category: {selectedCategory}\n \n )}\n

\n )}\n

\n\n {/* Products Grid */}\n {products.length === 0 ? (\n

📦

No products found

\n {searchQuery || selectedCategory \n ? \"Try adjusting your search or filter criteria\"\n : \"No products are available at the moment\"\n }\n

\n ) : (\n <>\n

\n {searchQuery ? `Search Results for \"${searchQuery}\"` :\n selectedCategory ? `${selectedCategory} Products` :\n 'All Products'}\n

\n \n {products.length} product{products.length !== 1 ? 's' : ''}\n \n

\n\n

\n {products.map(product => (\n \n ))}\n

\n \n )}\n

\n );\n}\n\ninterface ProductCardProps {\n product: Product;\n onAddToCart: (productId: number, quantity: number) => void;\n}\n\nfunction ProductCard({ product, onAddToCart }: ProductCardProps) {\n const [quantity, setQuantity] = useState(1);\n const [adding, setAdding] = useState(false);\n\n const handleAddToCart = async () => {\n setAdding(true);\n try {\n await onAddToCart(product.id, quantity);\n } finally {\n setAdding(false);\n }\n };\n\n return (\n

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

\n {product.image_url ? (\n \n ) : (\n

\n 📦\n

\n )}\n

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

\n {product.name}\n

{product.category}

\n\n

\n {product.description}\n

\n\n

\n \n ${product.price.toFixed(2)}\n \n 0 ? 'text-green-600' : 'text-red-600'}`}>\n {product.stock > 0 ? `${product.stock} in stock` : 'Out of stock'}\n \n

\n\n {/* Quantity and Add to Cart */}\n {product.stock > 0 && (\n

\n setQuantity(Math.max(1, quantity - 1))}\n className=\"px-2 py-1 text-gray-600 hover:bg-gray-100\"\n disabled={quantity <= 1}\n >\n -\n \n {quantity}\n setQuantity(Math.min(product.stock, quantity + 1))}\n className=\"px-2 py-1 text-gray-600 hover:bg-gray-100\"\n disabled={quantity >= product.stock}\n >\n +\n \n

\n \n \n {adding ? (\n \n

\n Adding...\n \n ) : (\n '🛒 Add to Cart'\n )}\n \n

\n )}\n\n {product.stock === 0 && (\n \n Out of Stock\n \n )}\n

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