AI Tools Directory - Discover Amazing AI Tools

\n {/* Filters */}\n

\n \n

\n\n {/* Additional Filters */}\n

\n {/* Pricing Filter */}\n

\n Pricing:\n setSelectedPricing(e.target.value || null)}\n className=\"bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-sm text-white focus:border-cyan-400 focus:outline-none\"\n >\n \n \n \n \n \n

\n\n {/* Featured Toggle */}\n \n setShowFeaturedOnly(e.target.checked)}\n className=\"rounded border-gray-600 text-cyan-400 focus:ring-cyan-400\"\n />\n Featured only\n \n\n {/* Results Count */}\n

\n {loading ? \"Loading...\" : `${filteredTools.length} tools found`}\n

\n\n {/* Tools Grid */}\n {loading ? (\n

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

\n ))}\n

\n ) : filteredTools.length > 0 ? (\n

\n {filteredTools.map((tool) => (\n \n ))}\n

\n ) : (\n

🔍

No tools found

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

\n {\n setSearchQuery(\"\");\n setSelectedCategory(null);\n setSelectedPricing(null);\n setShowFeaturedOnly(false);\n }}\n className=\"px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-500 text-white rounded-lg hover:from-cyan-600 hover:to-blue-600 transition-all\"\n >\n Clear all filters\n \n

\n )}\n

\n {tool.name}\n

\n 🏷️\n Categories\n

{category.name}

\n AI Tools Directory\n

No tools found

Code