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

wip

Browse Source
This commit is contained in:
Marc Mintel
2025-12-04 11:54:23 +01:00
parent c0fdae3d3c
commit 9d5caa87f3
83 changed files with 1579 additions and 2151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
apps/website/components/drivers/ProfileRaceHistory.tsx Normal file
View File

@@ -0,0 +1,153 @@
'use client';
import { useState } from 'react';
import Card from '../ui/Card';
import Button from '../ui/Button';
interface RaceResult {
id: string;
date: string;
track: string;
car: string;
position: number;
startPosition: number;
incidents: number;
league: string;
}
const mockRaceHistory: RaceResult[] = [
{ id: '1', date: '2024-11-28', track: 'Spa-Francorchamps', car: 'Porsche 911 GT3 R', position: 1, startPosition: 3, incidents: 0, league: 'GridPilot Championship' },
{ id: '2', date: '2024-11-21', track: 'Nürburgring GP', car: 'Porsche 911 GT3 R', position: 4, startPosition: 5, incidents: 2, league: 'GridPilot Championship' },
{ id: '3', date: '2024-11-14', track: 'Monza', car: 'Ferrari 488 GT3', position: 2, startPosition: 1, incidents: 1, league: 'GT3 Sprint Series' },
{ id: '4', date: '2024-11-07', track: 'Silverstone', car: 'Audi R8 LMS GT3', position: 7, startPosition: 12, incidents: 0, league: 'GridPilot Championship' },
{ id: '5', date: '2024-10-31', track: 'Interlagos', car: 'Mercedes-AMG GT3', position: 3, startPosition: 4, incidents: 1, league: 'GT3 Sprint Series' },
{ id: '6', date: '2024-10-24', track: 'Road Atlanta', car: 'Porsche 911 GT3 R', position: 5, startPosition: 8, incidents: 2, league: 'GridPilot Championship' },
{ id: '7', date: '2024-10-17', track: 'Watkins Glen', car: 'BMW M4 GT3', position: 1, startPosition: 2, incidents: 0, league: 'GT3 Sprint Series' },
{ id: '8', date: '2024-10-10', track: 'Brands Hatch', car: 'Porsche 911 GT3 R', position: 6, startPosition: 7, incidents: 3, league: 'GridPilot Championship' },
{ id: '9', date: '2024-10-03', track: 'Suzuka', car: 'McLaren 720S GT3', position: 2, startPosition: 6, incidents: 1, league: 'GT3 Sprint Series' },
{ id: '10', date: '2024-09-26', track: 'Bathurst', car: 'Porsche 911 GT3 R', position: 8, startPosition: 10, incidents: 0, league: 'GridPilot Championship' },
{ id: '11', date: '2024-09-19', track: 'Laguna Seca', car: 'Ferrari 488 GT3', position: 3, startPosition: 5, incidents: 2, league: 'GT3 Sprint Series' },
{ id: '12', date: '2024-09-12', track: 'Imola', car: 'Audi R8 LMS GT3', position: 1, startPosition: 1, incidents: 0, league: 'GridPilot Championship' },
];
export default function ProfileRaceHistory() {
const [filter, setFilter] = useState<'all' | 'wins' | 'podiums'>('all');
const [page, setPage] = useState(1);
const resultsPerPage = 10;
const filteredResults = mockRaceHistory.filter(result => {
if (filter === 'wins') return result.position === 1;
if (filter === 'podiums') return result.position <= 3;
return true;
});
const totalPages = Math.ceil(filteredResults.length / resultsPerPage);
const paginatedResults = filteredResults.slice(
(page - 1) * resultsPerPage,
page * resultsPerPage
);
return (
<div className="space-y-4">
<div className="flex items-center gap-2">
<Button
variant={filter === 'all' ? 'primary' : 'secondary'}
onClick={() => { setFilter('all'); setPage(1); }}
className="text-sm"
>
All Races
</Button>
<Button
variant={filter === 'wins' ? 'primary' : 'secondary'}
onClick={() => { setFilter('wins'); setPage(1); }}
className="text-sm"
>
Wins Only
</Button>
<Button
variant={filter === 'podiums' ? 'primary' : 'secondary'}
onClick={() => { setFilter('podiums'); setPage(1); }}
className="text-sm"
>
Podiums
</Button>
</div>
<Card>
<div className="space-y-2">
{paginatedResults.map((result) => (
<div
key={result.id}
className="p-4 rounded bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/50 transition-colors"
>
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-3">
<div className={`
w-8 h-8 rounded flex items-center justify-center font-bold text-sm
${result.position === 1 ? 'bg-green-400/20 text-green-400' :
result.position === 2 ? 'bg-gray-400/20 text-gray-400' :
result.position === 3 ? 'bg-warning-amber/20 text-warning-amber' :
'bg-charcoal-outline text-gray-400'}
`}>
P{result.position}
</div>
<div>
<div className="text-white font-medium">{result.track}</div>
<div className="text-sm text-gray-400">{result.car}</div>
</div>
</div>
<div className="text-right">
<div className="text-sm text-gray-400">
{new Date(result.date).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
})}
</div>
<div className="text-xs text-gray-500">{result.league}</div>
</div>
</div>
<div className="flex items-center gap-4 text-xs text-gray-500">
<span>Started P{result.startPosition}</span>
<span>•</span>
<span className={result.incidents === 0 ? 'text-green-400' : result.incidents > 2 ? 'text-red-400' : ''}>
{result.incidents}x incidents
</span>
{result.position < result.startPosition && (
<>
<span>•</span>
<span className="text-green-400">+{result.startPosition - result.position} positions</span>
</>
)}
</div>
</div>
))}
</div>
{totalPages > 1 && (
<div className="flex items-center justify-center gap-2 mt-4 pt-4 border-t border-charcoal-outline">
<Button
variant="secondary"
onClick={() => setPage(p => Math.max(1, p - 1))}
disabled={page === 1}
className="text-sm"
>
Previous
</Button>
<span className="text-gray-400 text-sm">
Page {page} of {totalPages}
</span>
<Button
variant="secondary"
onClick={() => setPage(p => Math.min(totalPages, p + 1))}
disabled={page === totalPages}
className="text-sm"
>
Next
</Button>
</div>
)}
</Card>
</div>
);
}