\n {/* Header */}\n

Discover Professionals & Consumers

\n Connect with {currentUser.userType === 'business' ? 'potential customers and partners' : 'businesses and service providers'}\n

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

\n {/* Search */}\n

\n setSearchQuery(e.target.value)}\n onKeyPress={(e) => e.key === 'Enter' && handleSearch()}\n className=\"flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n />\n \n 🔍\n \n

\n\n {/* User Type Filter */}\n

\n setFilterType(e.target.value as 'all' | 'business' | 'consumer')}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n >\n \n \n \n \n

\n\n {/* Industry Filter */}\n

\n setFilterIndustry(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n >\n \n {INDUSTRIES.map((industry) => (\n \n ))}\n \n

\n\n {/* Clear Filters */}\n {(filterType !== 'all' || filterIndustry || searchQuery) && (\n

\n {\n setFilterType('all');\n setFilterIndustry('');\n setSearchQuery('');\n fetchUsers();\n }}\n className=\"text-sm text-blue-600 hover:text-blue-500 transition-colors\"\n >\n Clear all filters\n \n

\n )}\n

\n\n {/* Error Message */}\n {error && (\n

\n {error}\n

\n )}\n\n {/* Loading State */}\n {loading && (\n

\n Loading users...\n

\n )}\n\n {/* Users Grid */}\n {!loading && (\n

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

👥

No users found

\n {searchQuery || filterType !== 'all' || filterIndustry\n ? 'Try adjusting your search or filters'\n : 'Be the first to connect with others!'\n }\n

\n ) : (\n filteredUsers.map((user) => (\n

{user.name}

\n {user.company && (\n

{user.company}

\n )}\n

\n \n {user.userType === 'business' ? '🏢' : '👤'}\n \n

\n\n {user.industry && (\n

\n \n {user.industry}\n \n

\n )}\n\n {user.description && (\n

\n {user.description}\n

\n )}\n\n

\n \n Joined {new Date(user.createdAt).toLocaleDateString()}\n \n onStartChat(user.id)}\n className=\"px-4 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-sm rounded-md hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all\"\n >\n 💬 Chat\n \n

\n ))\n )}\n

\n )}\n\n {/* Results Count */}\n {!loading && filteredUsers.length > 0 && (\n

\n Showing {filteredUsers.length} user{filteredUsers.length !== 1 ? 's' : ''}\n

\n )}\n

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