website refactor
This commit is contained in:
@@ -1,15 +1,18 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Trophy, ArrowLeft, Medal } from 'lucide-react';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import Image from 'next/image';
|
||||
import { Trophy, ArrowLeft } from 'lucide-react';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Container } from '@/ui/Container';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
|
||||
|
||||
// ============================================================================
|
||||
// TYPES
|
||||
// ============================================================================
|
||||
import { RankingsPodium } from '@/components/drivers/RankingsPodium';
|
||||
import { RankingsTable } from '@/components/drivers/RankingsTable';
|
||||
|
||||
interface DriverRankingsTemplateProps {
|
||||
viewData: DriverRankingsViewData;
|
||||
@@ -17,209 +20,62 @@ interface DriverRankingsTemplateProps {
|
||||
onBackToLeaderboards?: () => void;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// MAIN TEMPLATE COMPONENT
|
||||
// ============================================================================
|
||||
|
||||
export function DriverRankingsTemplate({
|
||||
viewData,
|
||||
onDriverClick,
|
||||
onBackToLeaderboards,
|
||||
}: DriverRankingsTemplateProps): React.ReactElement {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 pb-12">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
{onBackToLeaderboards && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={onBackToLeaderboards}
|
||||
className="flex items-center gap-2 mb-6"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Leaderboards
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
|
||||
<Trophy className="w-7 h-7 text-primary-blue" />
|
||||
</div>
|
||||
<div>
|
||||
<Heading level={1} className="text-3xl lg:text-4xl">
|
||||
Driver Leaderboard
|
||||
</Heading>
|
||||
<p className="text-gray-400">Full rankings of all drivers by performance metrics</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top 3 Podium */}
|
||||
{viewData.podium.length > 0 && (
|
||||
<div className="mb-10">
|
||||
<div className="flex items-end justify-center gap-4 lg:gap-8">
|
||||
{[1, 0, 2].map((index) => {
|
||||
const driver = viewData.podium[index];
|
||||
if (!driver) return null;
|
||||
|
||||
const position = index === 1 ? 1 : index === 0 ? 2 : 3;
|
||||
const config = {
|
||||
1: { height: 'h-40', color: 'from-yellow-400/20 to-amber-500/10 border-yellow-400/40', crown: 'text-yellow-400', text: 'text-xl text-yellow-400' },
|
||||
2: { height: 'h-32', color: 'from-gray-400/20 to-gray-500/10 border-gray-400/40', crown: 'text-gray-300', text: 'text-lg text-gray-300' },
|
||||
3: { height: 'h-24', color: 'from-amber-600/20 to-amber-700/10 border-amber-600/40', crown: 'text-amber-600', text: 'text-base text-amber-600' },
|
||||
}[position];
|
||||
|
||||
return (
|
||||
<button
|
||||
key={driver.id}
|
||||
type="button"
|
||||
onClick={() => onDriverClick?.(driver.id)}
|
||||
className="flex flex-col items-center group"
|
||||
>
|
||||
<div className="relative mb-4">
|
||||
<div className={`relative ${position === 1 ? 'w-24 h-24 lg:w-28 lg:h-28' : 'w-20 h-20 lg:w-24 lg:h-24'} rounded-full overflow-hidden border-4 ${position === 1 ? 'border-yellow-400 shadow-[0_0_30px_rgba(250,204,21,0.3)]' : position === 2 ? 'border-gray-300' : 'border-amber-600'} group-hover:scale-105 transition-transform`}>
|
||||
<Image
|
||||
src={driver.avatarUrl}
|
||||
alt={driver.name}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className={`absolute -bottom-2 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-gradient-to-br ${config.color} border-2 ${config.crown}`}>
|
||||
{position}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className={`text-white font-semibold ${position === 1 ? 'text-lg' : 'text-base'} group-hover:text-primary-blue transition-colors mb-1`}>
|
||||
{driver.name}
|
||||
</p>
|
||||
|
||||
<p className={`font-mono font-bold ${position === 1 ? 'text-xl text-yellow-400' : 'text-lg text-primary-blue'}`}>
|
||||
{driver.rating.toString()}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-3 h-3 text-performance-green">🏆</span>
|
||||
{driver.wins}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-3 h-3 text-warning-amber">🏅</span>
|
||||
{driver.podiums}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={`mt-4 w-28 lg:w-36 ${config.height} rounded-t-lg bg-gradient-to-t ${config.color} border-t border-x flex items-end justify-center pb-4`}>
|
||||
<span className={`text-4xl lg:text-5xl font-black ${config.crown}`}>
|
||||
{position}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Leaderboard Table */}
|
||||
<div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
|
||||
{/* Table Header */}
|
||||
<div className="grid grid-cols-12 gap-4 px-4 py-3 bg-iron-gray/50 border-b border-charcoal-outline text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
<div className="col-span-1 text-center">Rank</div>
|
||||
<div className="col-span-5 lg:col-span-4">Driver</div>
|
||||
<div className="col-span-2 text-center hidden md:block">Races</div>
|
||||
<div className="col-span-2 lg:col-span-1 text-center">Rating</div>
|
||||
<div className="col-span-2 lg:col-span-1 text-center">Wins</div>
|
||||
<div className="col-span-1 text-center hidden lg:block">Podiums</div>
|
||||
<div className="col-span-2 text-center">Win Rate</div>
|
||||
</div>
|
||||
|
||||
{/* Table Body */}
|
||||
<div className="divide-y divide-charcoal-outline/50">
|
||||
{viewData.drivers.map((driver) => {
|
||||
const position = driver.rank;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={driver.id}
|
||||
type="button"
|
||||
onClick={() => onDriverClick?.(driver.id)}
|
||||
className="grid grid-cols-12 gap-4 px-4 py-4 w-full text-left hover:bg-iron-gray/30 transition-colors group"
|
||||
<Container size="lg" py={8}>
|
||||
<Stack gap={8}>
|
||||
{/* Header */}
|
||||
<Box>
|
||||
{onBackToLeaderboards && (
|
||||
<Box mb={6}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={onBackToLeaderboards}
|
||||
icon={<Icon icon={ArrowLeft} size={4} />}
|
||||
>
|
||||
{/* Position */}
|
||||
<div className="col-span-1 flex items-center justify-center">
|
||||
<div className={`flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold border ${driver.medalBg} ${driver.medalColor}`}>
|
||||
{position <= 3 ? <Medal className="w-4 h-4" /> : position}
|
||||
</div>
|
||||
</div>
|
||||
Back to Leaderboards
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Driver Info */}
|
||||
<div className="col-span-5 lg:col-span-4 flex items-center gap-3">
|
||||
<div className="relative w-10 h-10 rounded-full overflow-hidden border-2 border-charcoal-outline">
|
||||
<Image src={driver.avatarUrl} alt={driver.name} fill className="object-cover" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-white font-semibold truncate group-hover:text-primary-blue transition-colors">
|
||||
{driver.name}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500">
|
||||
<span className="flex items-center gap-1">
|
||||
{driver.nationality}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
{driver.skillLevel}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Stack direction="row" align="center" gap={4}>
|
||||
<Surface variant="muted" rounded="xl" padding={3} style={{ background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05))', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
|
||||
<Icon icon={Trophy} size={7} color="#3b82f6" />
|
||||
</Surface>
|
||||
<Box>
|
||||
<Heading level={1}>Driver Leaderboard</Heading>
|
||||
<Text color="text-gray-400" block mt={1}>Full rankings of all drivers by performance metrics</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Races */}
|
||||
<div className="col-span-2 items-center justify-center hidden md:flex">
|
||||
<span className="text-gray-400">{driver.racesCompleted}</span>
|
||||
</div>
|
||||
|
||||
{/* Rating */}
|
||||
<div className="col-span-2 lg:col-span-1 flex items-center justify-center">
|
||||
<span className="font-mono font-semibold text-white">
|
||||
{driver.rating.toString()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Wins */}
|
||||
<div className="col-span-2 lg:col-span-1 flex items-center justify-center">
|
||||
<span className="font-mono font-semibold text-performance-green">
|
||||
{driver.wins}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Podiums */}
|
||||
<div className="col-span-1 items-center justify-center hidden lg:flex">
|
||||
<span className="font-mono font-semibold text-warning-amber">
|
||||
{driver.podiums}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Win Rate */}
|
||||
<div className="col-span-2 flex items-center justify-center">
|
||||
<span className="font-mono font-semibold text-white">
|
||||
{driver.winRate}%
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Empty State */}
|
||||
{viewData.drivers.length === 0 && (
|
||||
<div className="py-16 text-center">
|
||||
<span className="text-5xl mb-4 block">🔍</span>
|
||||
<p className="text-gray-400 mb-2">No drivers found</p>
|
||||
<p className="text-sm text-gray-500">There are no drivers in the system yet</p>
|
||||
</div>
|
||||
{/* Top 3 Podium */}
|
||||
{viewData.podium.length > 0 && (
|
||||
<RankingsPodium
|
||||
podium={viewData.podium.map(d => ({
|
||||
...d,
|
||||
rating: Number(d.rating),
|
||||
wins: Number(d.wins),
|
||||
podiums: Number(d.podiums)
|
||||
}))}
|
||||
onDriverClick={onDriverClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Leaderboard Table */}
|
||||
<RankingsTable
|
||||
drivers={viewData.drivers.map(d => ({
|
||||
...d,
|
||||
rating: Number(d.rating),
|
||||
wins: Number(d.wins)
|
||||
}))}
|
||||
onDriverClick={onDriverClick}
|
||||
/>
|
||||
</Stack>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user