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

37
apps/website/components/leaderboards/DriverLeaderboardPreview.tsx
View File

@@ -2,6 +2,9 @@ import React from 'react';
import { Trophy, Crown, Flag, ChevronRight } from 'lucide-react';
import Button from '@/components/ui/Button';
import Image from 'next/image';
import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
interface DriverLeaderboardPreviewProps {
drivers: {
@@ -19,33 +22,8 @@ interface DriverLeaderboardPreviewProps {
onNavigateToDrivers: () => void;
}
const SKILL_LEVELS = [
{ id: 'pro', label: 'Pro', color: 'text-yellow-400' },
{ id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
{ id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
{ id: 'beginner', label: 'Beginner', color: 'text-green-400' },
];
export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToDrivers }: DriverLeaderboardPreviewProps) {
const top10 = drivers.slice(0, 10);
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 top10 = drivers; // Already sliced in builder
return (
<div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
@@ -71,7 +49,6 @@ export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToD
<div className="divide-y divide-charcoal-outline/50">
{top10.map((driver, index) => {
const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
const position = index + 1;
return (
@@ -81,7 +58,7 @@ export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToD
onClick={() => onDriverClick(driver.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>
@@ -96,13 +73,13 @@ export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToD
<div className="flex items-center gap-2 text-xs text-gray-500">
<Flag className="w-3 h-3" />
{driver.nationality}
<span className={levelConfig?.color}>{levelConfig?.label}</span>
<span className={SkillLevelDisplay.getColor(driver.skillLevel)}>{SkillLevelDisplay.getLabel(driver.skillLevel)}</span>
</div>
</div>
<div className="flex items-center gap-4 text-sm">
<div className="text-center">
<p className="text-primary-blue font-mono font-semibold">{driver.rating.toLocaleString()}</p>
<p className="text-primary-blue font-mono font-semibold">{RatingDisplay.format(driver.rating)}</p>
<p className="text-[10px] text-gray-500">Rating</p>
</div>
<div className="text-center">