\n {/* Header */}\n

Browse Tasks

\n Find tasks that match your skills and interests\n

\n \n setShowFilters(!showFilters)}\n className=\"btn btn-secondary flex items-center gap-2\"\n >\n 🔍\n Filters\n {activeFilterCount > 0 && (\n \n {activeFilterCount}\n \n )}\n \n

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

\n setSearchTerm(e.target.value)}\n className=\"form-input pl-10\"\n />\n

\n 🔍\n

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

Filters

\n {activeFilterCount > 0 && (\n \n Clear All\n \n )}\n

\n \n

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

\n Category\n handleFilterChange('category', e.target.value)}\n className=\"form-select\"\n >\n \n {Object.entries(CATEGORY_LABELS).map(([key, label]) => (\n \n ))}\n \n

\n\n {/* Difficulty Filter */}\n

\n Difficulty\n handleFilterChange('difficulty', e.target.value)}\n className=\"form-select\"\n >\n \n {Object.entries(DIFFICULTY_LABELS).map(([key, label]) => (\n \n ))}\n \n

\n\n {/* Max Tokens Filter */}\n

\n Max Tokens\n handleFilterChange('maxTokens', e.target.value ? parseInt(e.target.value) : undefined)}\n className=\"form-select\"\n >\n \n \n \n \n \n \n

\n\n {/* Skills Filter */}\n

\n Skills\n handleFilterChange('skills', e.target.value ? [e.target.value] : undefined)}\n className=\"form-select\"\n >\n \n {SKILL_OPTIONS.map(skill => (\n \n ))}\n \n

\n )}\n\n {/* Results */}\n {loading ? (\n \n ) : (\n

\n {tasks.length} task{tasks.length !== 1 ? 's' : ''} found\n

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

🔍

\n No tasks found\n

\n Try adjusting your filters or search terms\n

\n \n Clear Filters\n \n

\n ) : (\n

\n {tasks.map(task => (\n \n ))}\n

\n )}\n

\n );\n}","deleted","label",[168,169,151],"frontend","components","permalink","https://www.val.town/x/vishuu6969696969/taskswap/code/frontend/components/TaskList.tsx","extension","actionData","errors"]