MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(users): fix team card display on user profile page

Browse Source 
- Use member_count instead of members.length for member count
- Use singular "Team" when user has only 1 team
- Add fallback banner image
- Add fallback logo placeholder
- Add submission badge
- Improve card layout and styling

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Maulana Sodiqin
2025-11-29 23:56:57 +07:00
co-authored by Claude
parent d67e3e7244
commit eb5e043357
1 changed files with 42 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/hackathon/src/app/users/[userId]/page.tsx
+42 -34
View File
@@ -124,60 +124,66 @@ const UserProfilePage: FC = (): ReactElement => {
</div> </div>
)} )}
{/* Teams Section */} {/* Team Section */}
{userTeams.length > 0 ? ( {userTeams.length > 0 ? (
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6"> <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6">
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4"> <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
Teams ({userTeams.length}) {userTeams.length === 1 ? 'Team' : 'Teams'} ({userTeams.length})
</h2> </h2>
<div className="grid gap-4 md:grid-cols-2"> <div className="space-y-4">
{userTeams.map((team: any) => ( {userTeams.map((team: any) => (
<Link <Link
key={team.id} key={team.id}
to={'/teams/' + team.id} to={'/teams/' + team.id}
className="bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-gray-950/50 overflow-hidden hover:shadow-lg transition-shadow" className="block bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-gray-950/50 overflow-hidden hover:shadow-lg transition-shadow border dark:border-gray-700"
> >
<div className="w-full aspect-3/1"> <img
<img src={team.banner || '/images/banner-imphnen.webp'}
src={team.banner} alt={team.name}
alt={team.name} className="w-full aspect-3/1 object-cover"
className="w-full h-full object-cover" />
/>
</div>
<div className="p-4"> <div className="p-4">
<div className="flex items-center space-x-3 mb-2"> <div className="flex items-center space-x-3 mb-3">
{team.logo && ( {team.logo ? (
<img <img
src={team.logo} src={team.logo}
alt={team.name} alt={team.name}
className="w-12 h-12 rounded-full object-cover" className="w-12 h-12 rounded-full object-cover"
/> />
) : (
<div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
<Icon icon="mdi:account-group" className="text-gray-500 dark:text-gray-400 text-xl" />
</div>
)} )}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h3 className="font-bold text-gray-900 dark:text-white line-clamp-2 mb-1"> <h3 className="font-bold text-gray-900 dark:text-white line-clamp-1 text-lg">
{team.name} {team.name}
</h3> </h3>
<div className="text-sm text-gray-600 dark:text-gray-400 flex gap-2 font-sans"> <div className="text-sm text-gray-600 dark:text-gray-400 flex items-center gap-3 font-sans mt-1">
<p className="truncate flex-1 min-w-0"> {team.has_submission && (
<Icon <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 shrink-0">
icon="mdi:map-marker" <Icon icon="mdi:check-circle" className="text-sm" />
className="inline-block w-4 h-4 mr-1" Submitted
/> </span>
{team.city} )}
</p> {team.city && (
<p className="whitespace-nowrap shrink-0"> <span className="flex items-center gap-1 truncate">
<Icon <Icon icon="mdi:map-marker" className="shrink-0" />
icon="mdi:account-group" <span className="truncate">{team.city}</span>
className="inline-block w-4 h-4 mr-1" </span>
/> )}
{team.members?.length || 0} members <span className="flex items-center gap-1 shrink-0">
</p> <Icon icon="mdi:account-group" />
{team.member_count || team.members?.length || 0} member{(team.member_count || team.members?.length || 0) !== 1 ? 's' : ''}
</span>
</div> </div>
</div> </div>
</div> </div>
<p className="text-gray-600 dark:text-gray-400 text-base line-clamp-2 font-sans"> {team.description && (
{team.description} <p className="text-gray-600 dark:text-gray-400 text-sm line-clamp-2 font-sans">
</p> {team.description}
</p>
)}
</div> </div>
</Link> </Link>
))} ))}
@@ -186,10 +192,12 @@ const UserProfilePage: FC = (): ReactElement => {
) : ( ) : (
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6"> <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md dark:shadow-gray-950/50 p-4 md:p-6">
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4"> <h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
Teams Team
</h2> </h2>
<div className="text-center py-8"> <div className="text-center py-8">
<div className="text-4xl mb-3">👥</div> <div className="text-4xl mb-3">
<Icon icon="mdi:account-group-outline" className="inline-block text-gray-400" />
</div>
<p className="text-gray-600 dark:text-gray-400"> <p className="text-gray-600 dark:text-gray-400">
Not in any team yet Not in any team yet
</p> </p>