Browse Jobs

\n \n {/* Search and Filters */}\n

\n \n Search Jobs\n \n setSearchTerm(e.target.value)}\n className=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n

\n \n Location\n \n setLocationFilter(e.target.value)}\n className=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n {uniqueLocations.map(location => (\n \n ))}\n \n

\n \n {isAuthenticated && (\n

\n \n setShowMatchingOnly(!showMatchingOnly)}\n className=\"mr-2 h-5 w-5 text-blue-600\"\n />\n Show matching jobs only\n \n

\n )}\n

\n \n {/* Skills filter */}\n

\n \n Filter by Skills\n \n

\n {availableSkills.slice(0, 10).map(skill => (\n toggleSkillFilter(skill.id)}\n className={`px-3 py-1 rounded-full text-sm ${\n selectedSkills.includes(skill.id)\n ? \"bg-blue-600 text-white\"\n : \"bg-gray-100 text-gray-700 hover:bg-gray-200\"\n }`}\n >\n {skill.name}\n \n ))}\n

\n \n {/* Job List */}\n {loading ? (\n

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

\n {filteredJobs.map(job => (\n

{job.title}

{job.company}

\n \n {job.location}\n {job.salary && (\n <>\n •\n \n {job.salary}\n \n )}\n

\n \n

\n {job.matching_skills !== undefined && (\n \n {job.matching_skills} skills match\n \n )}\n

\n \n View Details\n \n

\n \n

\n {job.description.length > 150 \n ? `${job.description.substring(0, 150)}...` \n : job.description}\n

\n \n

\n \n \n Posted {new Date(job.created_at || \"\").toLocaleDateString()}\n \n \n {job.deadline && (\n \n \n Deadline: {new Date(job.deadline).toLocaleDateString()}\n \n )}\n

\n ))}\n

\n ) : (\n

No jobs found matching your criteria.

\n {\n setSearchTerm(\"\");\n setLocationFilter(\"\");\n setSelectedSkills([]);\n setShowMatchingOnly(false);\n }}\n className=\"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition\"\n >\n Clear Filters\n \n

\n )}\n

\n );\n};\n\nexport default JobList;","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/Beryl5_Oluoch/project1/code/frontend/components/JobList.tsx","extension","actionData","errors"]