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

Freelancer Directory

\n Discover talented freelancers and virtual assistants\n

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

\n \n Search Freelancers\n \n setSearchTerm(e.target.value)}\n placeholder=\"Search by name, title, or bio...\"\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n\n

\n \n Filter by Skill\n \n setSelectedSkill(e.target.value)}\n className=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n \n {getAllSkills().map(skill => (\n \n ))}\n \n

\n\n

\n {filteredFreelancers.length} freelancer{filteredFreelancers.length !== 1 ? 's' : ''} found\n

\n {(searchTerm || selectedSkill) && (\n {\n setSearchTerm('');\n setSelectedSkill('');\n }}\n className=\"text-blue-600 hover:text-blue-700 text-sm font-medium\"\n >\n Clear Filters\n \n )}\n

\n\n {/* Freelancers Grid */}\n

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

👥

No freelancers found

\n {searchTerm || selectedSkill \n ? 'Try adjusting your search criteria' \n : 'Be the first to join as a freelancer!'\n }\n

\n ) : (\n filteredFreelancers.map((freelancer) => (\n setSelectedFreelancer(freelancer)}\n />\n ))\n )}\n

\n\n {/* Freelancer Details Modal */}\n {selectedFreelancer && (\n setSelectedFreelancer(null)}\n />\n )}\n

\n );\n}\n\nfunction FreelancerCard({ freelancer, onClick }: {\n freelancer: User;\n onClick: () => void;\n}) {\n const skills = getSkills(freelancer.skills || '');\n\n const getSkills = (skillsJson: string): string[] => {\n try {\n return skillsJson ? JSON.parse(skillsJson) : [];\n } catch {\n return [];\n }\n };\n\n return (\n

\n {freelancer.name.charAt(0).toUpperCase()}\n

{freelancer.name}

\n {freelancer.title && (\n

{freelancer.title}

\n )}\n

\n\n

\n {freelancer.location && (\n

\n 📍\n {freelancer.location}\n

\n )}\n\n {freelancer.hourly_rate && (\n

\n 💰\n ${freelancer.hourly_rate}/hour\n

\n )}\n\n

\n 📅\n Joined {new Date(freelancer.created_at).toLocaleDateString()}\n

\n\n {freelancer.bio && (\n

\n {freelancer.bio}\n

\n )}\n\n {skills.length > 0 && (\n

\n {skills.slice(0, 4).map((skill, index) => (\n \n {skill}\n \n ))}\n {skills.length > 4 && (\n +{skills.length - 4}\n )}\n

\n )}\n

\n );\n}\n\nfunction FreelancerModal({ freelancer, onClose }: {\n freelancer: User;\n onClose: () => void;\n}) {\n const skills = getSkills(freelancer.skills || '');\n\n const getSkills = (skillsJson: string): string[] => {\n try {\n return skillsJson ? JSON.parse(skillsJson) : [];\n } catch {\n return [];\n }\n };\n\n return (\n

\n {freelancer.name.charAt(0).toUpperCase()}\n

{freelancer.name}

\n {freelancer.title && (\n

{freelancer.title}

\n )}\n

\n {freelancer.location && (\n \n 📍\n {freelancer.location}\n \n )}\n \n 📅\n Joined {new Date(freelancer.created_at).toLocaleDateString()}\n \n

\n \n \n \n

\n\n

\n {freelancer.hourly_rate && (\n

${freelancer.hourly_rate}/hour

Hourly Rate

\n )}\n\n {freelancer.bio && (\n

About

{freelancer.bio}

\n )}\n\n {skills.length > 0 && (\n

Skills & Expertise

\n {skills.map((skill, index) => (\n \n {skill}\n \n ))}\n

\n )}\n\n

Contact Information

\n 📧\n {freelancer.email}\n

\n {freelancer.portfolio_url && (\n

\n 🔗\n \n View Portfolio\n \n

\n )}\n

\n\n

\n \n Close\n \n {\n window.location.href = `mailto:${freelancer.email}?subject=Project Opportunity`;\n }}\n className=\"flex-1 bg-blue-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-blue-700 transition-colors\"\n >\n Contact Freelancer\n \n

\n );\n}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/Sandra_Ozumba/Freelance101/code/frontend/components/FreelancerDirectory.tsx","extension","actionData","errors"]