109 lines
4.4 KiB
TypeScript
109 lines
4.4 KiB
TypeScript
import React from 'react';
|
|
import Image from 'next/image';
|
|
import { Users, Crown, Shield, ChevronRight } from 'lucide-react';
|
|
import Button from '@/ui/Button';
|
|
import { getMediaUrl } from '@/lib/utilities/media';
|
|
import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
|
|
import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
|
|
|
|
interface TeamLeaderboardPreviewProps {
|
|
teams: {
|
|
id: string;
|
|
name: string;
|
|
tag: string;
|
|
memberCount: number;
|
|
category?: string;
|
|
totalWins: number;
|
|
logoUrl: string;
|
|
position: number;
|
|
}[];
|
|
onTeamClick: (id: string) => void;
|
|
onNavigateToTeams: () => void;
|
|
}
|
|
|
|
export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }: TeamLeaderboardPreviewProps) {
|
|
const top5 = teams; // Already sliced in builder when implemented
|
|
|
|
return (
|
|
<div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
|
|
<div className="flex items-center justify-between px-5 py-4 border-b border-charcoal-outline bg-iron-gray/20">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 border border-purple-500/20">
|
|
<Users className="w-5 h-5 text-purple-400" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-white">Team Rankings</h3>
|
|
<p className="text-xs text-gray-500">Top performing racing teams</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onNavigateToTeams}
|
|
className="flex items-center gap-2 text-sm"
|
|
>
|
|
View All
|
|
<ChevronRight className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="divide-y divide-charcoal-outline/50">
|
|
{top5.map((team, index) => {
|
|
const position = team.position;
|
|
|
|
return (
|
|
<button
|
|
key={team.id}
|
|
type="button"
|
|
onClick={() => onTeamClick(team.id)}
|
|
className="flex items-center gap-4 px-5 py-3 w-full text-left hover:bg-iron-gray/30 transition-colors group"
|
|
>
|
|
<div className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold border ${MedalDisplay.getBg(position)} ${MedalDisplay.getColor(position)}`}>
|
|
{position <= 3 ? <Crown className="w-3.5 h-3.5" /> : position}
|
|
</div>
|
|
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-charcoal-outline border border-charcoal-outline overflow-hidden">
|
|
<Image
|
|
src={team.logoUrl || getMediaUrl('team-logo', team.id)}
|
|
alt={team.name}
|
|
width={36}
|
|
height={36}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-white font-medium truncate group-hover:text-purple-400 transition-colors">
|
|
{team.name}
|
|
</p>
|
|
<div className="flex items-center gap-2 text-xs text-gray-500 flex-wrap">
|
|
{team.category && (
|
|
<span className="flex items-center gap-1 text-purple-400">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-purple-400"></span>
|
|
{team.category}
|
|
</span>
|
|
)}
|
|
<span className="flex items-center gap-1">
|
|
<Users className="w-3 h-3" />
|
|
{team.memberCount} members
|
|
</span>
|
|
<span className={SkillLevelDisplay.getColor(team.category || '')}>{SkillLevelDisplay.getLabel(team.category || '')}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 text-sm">
|
|
<div className="text-center">
|
|
<p className="text-purple-400 font-mono font-semibold">{team.memberCount}</p>
|
|
<p className="text-[10px] text-gray-500">Members</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-performance-green font-mono font-semibold">{team.totalWins}</p>
|
|
<p className="text-[10px] text-gray-500">Wins</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |