\n {/* Header Skeleton */}\n

\n\n {/* Content Skeleton */}\n

\n {[...Array(8)].map((_, i) => (\n

\n ))}\n

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

\n {/* Header */}\n

\n {/* Title and Back Button */}\n

\n navigateTo('home')}\n className=\"text-gray-600 hover:text-gray-900 tap-target\"\n >\n ←\n \n

Browse Products

\n \n setShowFilters(!showFilters)}\n className=\"text-indigo-600 hover:text-indigo-700 tap-target\"\n >\n 🔧 Filters\n \n

\n\n {/* Search Bar */}\n

\n setSearchQuery(e.target.value)}\n onKeyPress={(e) => e.key === 'Enter' && handleSearch()}\n className=\"w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent\"\n />\n

\n 🔍\n

\n {searchQuery && (\n \n Search\n \n )}\n

\n\n {/* Categories */}\n

\n handleCategorySelect('')}\n className={`\n flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-colors\n ${!filters.category \n ? 'bg-indigo-600 text-white' \n : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\n }\n `}\n >\n All\n \n {categories.map((category) => (\n handleCategorySelect(category.slug)}\n className={`\n flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-colors\n ${filters.category === category.slug\n ? 'bg-indigo-600 text-white' \n : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\n }\n `}\n >\n {category.name} ({category.productCount})\n \n ))}\n

\n\n {/* Filters Panel */}\n {showFilters && (\n

\n {/* Sort By */}\n

\n \n Sort By\n \n setSortBy(e.target.value)}\n className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500\"\n >\n \n \n \n \n \n \n

\n\n {/* Quick Filters */}\n

\n \n Quick Filters\n \n

\n {[\n { key: 'featured', label: 'Featured' },\n { key: 'trending', label: 'Trending' },\n { key: 'newArrival', label: 'New Arrivals' },\n { key: 'inStock', label: 'In Stock Only' },\n ].map((filter) => (\n handleFilterChange(filter.key as keyof SearchFilters, !filters[filter.key as keyof SearchFilters])}\n className={`\n px-3 py-1 rounded-full text-sm font-medium transition-colors\n ${filters[filter.key as keyof SearchFilters]\n ? 'bg-indigo-600 text-white'\n : 'bg-white text-gray-700 border border-gray-300'\n }\n `}\n >\n {filter.label}\n \n ))}\n

\n\n {/* Clear Filters */}\n \n Clear All Filters\n \n

\n )}\n

\n\n {/* Results */}\n

\n {/* Results Count */}\n

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

\n \n {/* Active Filters */}\n {(filters.category || filters.featured || filters.trending || filters.newArrival) && (\n

\n Filters:\n {filters.category && (\n \n {categories.find(c => c.slug === filters.category)?.name}\n \n )}\n {filters.featured && (\n \n Featured\n \n )}\n {filters.trending && (\n \n Trending\n \n )}\n {filters.newArrival && (\n \n New\n \n )}\n

\n )}\n

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

\n {products.map((product) => (\n item.productId === product.id)}\n />\n ))}\n

\n ) : (\n

🔍

No products found

\n Try adjusting your search or filters to find what you're looking for.\n

\n \n Clear Filters\n \n

\n )}\n

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