wip
This commit is contained in:
100
apps/website/app/drivers/[id]/page.tsx
Normal file
100
apps/website/app/drivers/[id]/page.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter, useParams } from 'next/navigation';
|
||||
import { getDriverRepository } from '@/lib/di-container';
|
||||
import DriverProfile from '@/components/alpha/DriverProfile';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Breadcrumbs from '@/components/alpha/Breadcrumbs';
|
||||
import { EntityMappers, DriverDTO } from '@gridpilot/racing-application/mappers/EntityMappers';
|
||||
|
||||
export default function DriverDetailPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const driverId = params.id as string;
|
||||
|
||||
const [driver, setDriver] = useState<DriverDTO | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadDriver();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [driverId]);
|
||||
|
||||
const loadDriver = async () => {
|
||||
try {
|
||||
const driverRepo = getDriverRepository();
|
||||
const driverEntity = await driverRepo.findById(driverId);
|
||||
|
||||
if (!driverEntity) {
|
||||
setError('Driver not found');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const driverDto = EntityMappers.toDriverDTO(driverEntity);
|
||||
|
||||
if (!driverDto) {
|
||||
setError('Driver not found');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setDriver(driverDto);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load driver');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center text-gray-400">Loading driver profile...</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !driver) {
|
||||
return (
|
||||
<div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<Card className="text-center py-12">
|
||||
<div className="text-warning-amber mb-4">
|
||||
{error || 'Driver not found'}
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => router.push('/drivers')}
|
||||
>
|
||||
Back to Drivers
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Breadcrumb */}
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ label: 'Home', href: '/' },
|
||||
{ label: 'Drivers', href: '/drivers' },
|
||||
{ label: driver.name }
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Driver Profile Component */}
|
||||
<DriverProfile driver={driver} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
306
apps/website/app/drivers/page.tsx
Normal file
306
apps/website/app/drivers/page.tsx
Normal file
@@ -0,0 +1,306 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import DriverCard from '@/components/alpha/DriverCard';
|
||||
import RankBadge from '@/components/alpha/RankBadge';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Card from '@/components/ui/Card';
|
||||
|
||||
// Mock data
|
||||
const MOCK_DRIVERS = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Max Verstappen',
|
||||
rating: 3245,
|
||||
skillLevel: 'pro' as const,
|
||||
nationality: 'Netherlands',
|
||||
racesCompleted: 156,
|
||||
wins: 45,
|
||||
podiums: 89,
|
||||
isActive: true,
|
||||
rank: 1,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Lewis Hamilton',
|
||||
rating: 3198,
|
||||
skillLevel: 'pro' as const,
|
||||
nationality: 'United Kingdom',
|
||||
racesCompleted: 234,
|
||||
wins: 78,
|
||||
podiums: 145,
|
||||
isActive: true,
|
||||
rank: 2,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Michael Schmidt',
|
||||
rating: 2912,
|
||||
skillLevel: 'advanced' as const,
|
||||
nationality: 'Germany',
|
||||
racesCompleted: 145,
|
||||
wins: 34,
|
||||
podiums: 67,
|
||||
isActive: true,
|
||||
rank: 3,
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'Emma Thompson',
|
||||
rating: 2789,
|
||||
skillLevel: 'advanced' as const,
|
||||
nationality: 'Australia',
|
||||
racesCompleted: 112,
|
||||
wins: 23,
|
||||
podiums: 56,
|
||||
isActive: true,
|
||||
rank: 5,
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'Sarah Chen',
|
||||
rating: 2456,
|
||||
skillLevel: 'advanced' as const,
|
||||
nationality: 'Singapore',
|
||||
racesCompleted: 89,
|
||||
wins: 12,
|
||||
podiums: 34,
|
||||
isActive: true,
|
||||
rank: 8,
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'Isabella Rossi',
|
||||
rating: 2145,
|
||||
skillLevel: 'intermediate' as const,
|
||||
nationality: 'Italy',
|
||||
racesCompleted: 67,
|
||||
wins: 8,
|
||||
podiums: 23,
|
||||
isActive: true,
|
||||
rank: 12,
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'Carlos Rodriguez',
|
||||
rating: 1876,
|
||||
skillLevel: 'intermediate' as const,
|
||||
nationality: 'Spain',
|
||||
racesCompleted: 45,
|
||||
wins: 3,
|
||||
podiums: 12,
|
||||
isActive: false,
|
||||
rank: 18,
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: 'Yuki Tanaka',
|
||||
rating: 1234,
|
||||
skillLevel: 'beginner' as const,
|
||||
nationality: 'Japan',
|
||||
racesCompleted: 12,
|
||||
wins: 0,
|
||||
podiums: 2,
|
||||
isActive: true,
|
||||
rank: 45,
|
||||
},
|
||||
];
|
||||
|
||||
export default function DriversPage() {
|
||||
const router = useRouter();
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedSkill, setSelectedSkill] = useState('all');
|
||||
const [selectedNationality, setSelectedNationality] = useState('all');
|
||||
const [activeOnly, setActiveOnly] = useState(false);
|
||||
const [sortBy, setSortBy] = useState<'rank' | 'rating' | 'wins' | 'podiums'>('rank');
|
||||
|
||||
const nationalities = Array.from(
|
||||
new Set(MOCK_DRIVERS.map((d) => d.nationality).filter(Boolean))
|
||||
).sort();
|
||||
|
||||
const filteredDrivers = MOCK_DRIVERS.filter((driver) => {
|
||||
const matchesSearch = driver.name
|
||||
.toLowerCase()
|
||||
.includes(searchQuery.toLowerCase());
|
||||
const matchesSkill =
|
||||
selectedSkill === 'all' || driver.skillLevel === selectedSkill;
|
||||
const matchesNationality =
|
||||
selectedNationality === 'all' || driver.nationality === selectedNationality;
|
||||
const matchesActive = !activeOnly || driver.isActive;
|
||||
|
||||
return matchesSearch && matchesSkill && matchesNationality && matchesActive;
|
||||
});
|
||||
|
||||
const sortedDrivers = [...filteredDrivers].sort((a, b) => {
|
||||
switch (sortBy) {
|
||||
case 'rank':
|
||||
return a.rank - b.rank;
|
||||
case 'rating':
|
||||
return b.rating - a.rating;
|
||||
case 'wins':
|
||||
return b.wins - a.wins;
|
||||
case 'podiums':
|
||||
return b.podiums - a.podiums;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
const handleDriverClick = (driverId: string) => {
|
||||
router.push(`/drivers/${driverId}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Drivers</h1>
|
||||
<p className="text-gray-400">
|
||||
Browse driver profiles and stats
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="mb-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
Search Drivers
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search by name..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
Skill Level
|
||||
</label>
|
||||
<select
|
||||
className="w-full px-3 py-3 bg-iron-gray border-0 rounded-md text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm"
|
||||
value={selectedSkill}
|
||||
onChange={(e) => setSelectedSkill(e.target.value)}
|
||||
>
|
||||
<option value="all">All Levels</option>
|
||||
<option value="beginner">Beginner</option>
|
||||
<option value="intermediate">Intermediate</option>
|
||||
<option value="advanced">Advanced</option>
|
||||
<option value="pro">Pro</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
Nationality
|
||||
</label>
|
||||
<select
|
||||
className="w-full px-3 py-3 bg-iron-gray border-0 rounded-md text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm"
|
||||
value={selectedNationality}
|
||||
onChange={(e) => setSelectedNationality(e.target.value)}
|
||||
>
|
||||
<option value="all">All Countries</option>
|
||||
{nationalities.map((nat) => (
|
||||
<option key={nat} value={nat}>
|
||||
{nat}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
Status
|
||||
</label>
|
||||
<label className="flex items-center pt-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="w-4 h-4 text-primary-blue bg-iron-gray border-charcoal-outline rounded focus:ring-primary-blue focus:ring-2"
|
||||
checked={activeOnly}
|
||||
onChange={(e) => setActiveOnly(e.target.checked)}
|
||||
/>
|
||||
<span className="ml-2 text-sm text-gray-400">Active only</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">
|
||||
Sort By
|
||||
</label>
|
||||
<select
|
||||
className="w-full px-3 py-3 bg-iron-gray border-0 rounded-md text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm"
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value as any)}
|
||||
>
|
||||
<option value="rank">Overall Rank</option>
|
||||
<option value="rating">Rating</option>
|
||||
<option value="wins">Wins</option>
|
||||
<option value="podiums">Podiums</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<p className="text-sm text-gray-400">
|
||||
{sortedDrivers.length} {sortedDrivers.length === 1 ? 'driver' : 'drivers'} found
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{sortedDrivers.map((driver, index) => (
|
||||
<Card
|
||||
key={driver.id}
|
||||
className="hover:border-charcoal-outline/60 transition-colors cursor-pointer"
|
||||
onClick={() => handleDriverClick(driver.id)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<RankBadge rank={driver.rank} size="lg" />
|
||||
|
||||
<div className="w-16 h-16 rounded-full bg-primary-blue/20 flex items-center justify-center text-2xl font-bold text-white">
|
||||
{driver.name.charAt(0)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold text-white mb-1">{driver.name}</h3>
|
||||
<p className="text-sm text-gray-400">
|
||||
{driver.nationality} • {driver.racesCompleted} races
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8 text-center">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-primary-blue">{driver.rating}</div>
|
||||
<div className="text-xs text-gray-400">Rating</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-green-400">{driver.wins}</div>
|
||||
<div className="text-xs text-gray-400">Wins</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-warning-amber">{driver.podiums}</div>
|
||||
<div className="text-xs text-gray-400">Podiums</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-400">
|
||||
{((driver.wins / driver.racesCompleted) * 100).toFixed(0)}%
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">Win Rate</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{sortedDrivers.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-400">No drivers found matching your filters.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user