Professional Directory

\n Connect with talented freelancers and potential clients in our community\n

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

\n setFilter('all')}\n className={`px-4 py-2 rounded-md font-medium transition-colors ${\n filter === 'all' \n ? 'bg-white text-indigo-600 shadow-sm' \n : 'text-gray-600 hover:text-gray-900'\n }`}\n >\n All Professionals\n \n setFilter('freelancers')}\n className={`px-4 py-2 rounded-md font-medium transition-colors ${\n filter === 'freelancers' \n ? 'bg-white text-indigo-600 shadow-sm' \n : 'text-gray-600 hover:text-gray-900'\n }`}\n >\n Freelancers\n \n setFilter('clients')}\n className={`px-4 py-2 rounded-md font-medium transition-colors ${\n filter === 'clients' \n ? 'bg-white text-indigo-600 shadow-sm' \n : 'text-gray-600 hover:text-gray-900'\n }`}\n >\n Clients\n \n

\n \n

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

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

\n 👥\n

\n {searchTerm ? 'No matching profiles found' : 'No profiles yet'}\n

\n {searchTerm ? 'Try adjusting your search terms' : 'Be the first to join our community!'}\n

\n ) : (\n

\n {filteredProfiles.map((profile) => (\n setSelectedProfile(profile)}\n />\n ))}\n

\n )}\n\n {selectedProfile && (\n setSelectedProfile(null)}\n currentUser={currentUser}\n />\n )}\n

\n );\n}\n\nfunction ProfileCard({ profile, onClick }: {\n profile: User;\n onClick: () => void;\n}) {\n const getProfileTypeIcon = () => {\n if (profile.isFreelancer && profile.isClient) return '🎯';\n if (profile.isFreelancer) return '💼';\n if (profile.isClient) return '🏢';\n return '👤';\n };\n\n const getProfileTypeText = () => {\n if (profile.isFreelancer && profile.isClient) return 'Freelancer & Client';\n if (profile.isFreelancer) return 'Freelancer';\n if (profile.isClient) return 'Client';\n return 'Professional';\n };\n\n return (\n

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

{profile.name}

{profile.title || 'Professional'}

\n \n {getProfileTypeIcon()}\n \n

\n\n {profile.bio && (\n

{profile.bio}

\n )}\n\n

\n {profile.skills.length > 0 && (\n

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

\n )}\n\n

\n 📍 {profile.location || 'Location not specified'}\n {profile.hourlyRate && (\n \n ${profile.hourlyRate}/hr\n \n )}\n

\n\n

\n Joined {new Date(profile.createdAt).toLocaleDateString()}\n

\n );\n}\n\nfunction ProfileDetailModal({ profile, onClose, currentUser }: {\n profile: User;\n onClose: () => void;\n currentUser: User | null;\n}) {\n const getProfileTypeIcon = () => {\n if (profile.isFreelancer && profile.isClient) return '🎯';\n if (profile.isFreelancer) return '💼';\n if (profile.isClient) return '🏢';\n return '👤';\n };\n\n const getProfileTypeText = () => {\n if (profile.isFreelancer && profile.isClient) return 'Freelancer & Client';\n if (profile.isFreelancer) return 'Freelancer';\n if (profile.isClient) return 'Client';\n return 'Professional';\n };\n\n return (\n

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

{profile.name}

{profile.title || 'Professional'}

\n {getProfileTypeIcon()}\n {getProfileTypeText()}\n

\n \n

\n\n

\n {profile.bio && (\n

About

{profile.bio}

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

Skills & Expertise

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

\n )}\n\n

\n {profile.hourlyRate && (\n

Hourly Rate

\n ${profile.hourlyRate}/hour\n

\n )}\n \n

Location

\n 📍 {profile.location || 'Location not specified'}\n

\n\n

\n Member since {new Date(profile.createdAt).toLocaleDateString()}\n

\n \n {currentUser && currentUser.id !== profile.id && (\n

\n \n {profile.isFreelancer && currentUser.isClient && (\n \n )}\n

\n )}\n

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