mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-14 16:28:39 +01:00
parent 85e09b6f4d
commit 4b7d82ab43
119 changed files with 2403 additions and 1615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
apps/website/components/leaderboards/TeamLeaderboardPreview.tsx
View File

@@ -3,6 +3,8 @@ import Image from 'next/image';
import { Users, Crown, Shield, ChevronRight } from 'lucide-react';
import Button from '@/components/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: {
@@ -19,33 +21,8 @@ interface TeamLeaderboardPreviewProps {
onNavigateToTeams: () => void;
}
const SKILL_LEVELS = [
{ id: 'pro', label: 'Pro', icon: Crown, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
{ id: 'advanced', label: 'Advanced', icon: Crown, color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
{ id: 'intermediate', label: 'Intermediate', icon: Crown, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
{ id: 'beginner', label: 'Beginner', icon: Shield, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
];
export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }: TeamLeaderboardPreviewProps) {
const top5 = teams.slice(0, 5);
const getMedalColor = (position: number) => {
switch (position) {
case 1: return 'text-yellow-400';
case 2: return 'text-gray-300';
case 3: return 'text-amber-600';
default: return 'text-gray-500';
}
};
const getMedalBg = (position: number) => {
switch (position) {
case 1: return 'bg-yellow-400/10 border-yellow-400/30';
case 2: return 'bg-gray-300/10 border-gray-300/30';
case 3: return 'bg-amber-600/10 border-amber-600/30';
default: return 'bg-iron-gray/50 border-charcoal-outline';
}
};
const top5 = teams; // Already sliced in builder when implemented
return (
<div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
@@ -71,8 +48,6 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
<div className="divide-y divide-charcoal-outline/50">
{top5.map((team, index) => {
const levelConfig = SKILL_LEVELS.find((l) => l.id === team.category);
const LevelIcon = levelConfig?.icon || Shield;
const position = team.position;
return (
@@ -82,7 +57,7 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
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 ${getMedalBg(position)} ${getMedalColor(position)}`}>
<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>
@@ -111,7 +86,7 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
<Users className="w-3 h-3" />
{team.memberCount} members
</span>
<span className={levelConfig?.color}>{levelConfig?.label}</span>
<span className={SkillLevelDisplay.getColor(team.category || '')}>{SkillLevelDisplay.getLabel(team.category || '')}</span>
</div>
</div>