82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { getMediaUrl } from '@/lib/utilities/media';
|
|
import { TeamLeaderboardItem } from '@/ui/TeamLeaderboardItem';
|
|
import { TeamLeaderboardPreview as UiTeamLeaderboardPreview } from '@/ui/TeamLeaderboardPreview';
|
|
|
|
interface TeamLeaderboardPreviewProps {
|
|
topTeams: Array<{
|
|
id: string;
|
|
name: string;
|
|
logoUrl?: string;
|
|
category?: string;
|
|
memberCount: number;
|
|
totalWins: number;
|
|
isRecruiting: boolean;
|
|
rating?: number;
|
|
performanceLevel: string;
|
|
}>;
|
|
onTeamClick: (id: string) => void;
|
|
onViewFullLeaderboard: () => void;
|
|
}
|
|
|
|
export function TeamLeaderboardPreview({
|
|
topTeams,
|
|
onTeamClick,
|
|
onViewFullLeaderboard
|
|
}: TeamLeaderboardPreviewProps) {
|
|
const getMedalColor = (position: number) => {
|
|
switch (position) {
|
|
case 0: return '#facc15';
|
|
case 1: return '#d1d5db';
|
|
case 2: return '#d97706';
|
|
default: return '#6b7280';
|
|
}
|
|
};
|
|
|
|
const getMedalBg = (position: number) => {
|
|
switch (position) {
|
|
case 0: return 'rgba(250, 204, 21, 0.1)';
|
|
case 1: return 'rgba(209, 213, 219, 0.1)';
|
|
case 2: return 'rgba(217, 119, 6, 0.1)';
|
|
default: return 'rgba(38, 38, 38, 0.5)';
|
|
}
|
|
};
|
|
|
|
const getMedalBorder = (position: number) => {
|
|
switch (position) {
|
|
case 0: return 'rgba(250, 204, 21, 0.3)';
|
|
case 1: return 'rgba(209, 213, 219, 0.3)';
|
|
case 2: return 'rgba(217, 119, 6, 0.3)';
|
|
default: return 'rgba(38, 38, 38, 1)';
|
|
}
|
|
};
|
|
|
|
if (topTeams.length === 0) return null;
|
|
|
|
return (
|
|
<UiTeamLeaderboardPreview
|
|
title="Top Teams"
|
|
subtitle="Highest rated racing teams"
|
|
onViewFull={onViewFullLeaderboard}
|
|
>
|
|
{topTeams.map((team, index) => (
|
|
<TeamLeaderboardItem
|
|
key={team.id}
|
|
position={index + 1}
|
|
name={team.name}
|
|
logoUrl={team.logoUrl || getMediaUrl('team-logo', team.id)}
|
|
category={team.category}
|
|
memberCount={team.memberCount}
|
|
totalWins={team.totalWins}
|
|
isRecruiting={team.isRecruiting}
|
|
rating={team.rating}
|
|
onClick={() => onTeamClick(team.id)}
|
|
medalColor={getMedalColor(index)}
|
|
medalBg={getMedalBg(index)}
|
|
medalBorder={getMedalBorder(index)}
|
|
/>
|
|
))}
|
|
</UiTeamLeaderboardPreview>
|
|
);
|
|
}
|