126 lines
3.5 KiB
TypeScript
126 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Card from '../ui/Card';
|
|
import Button from '../ui/Button';
|
|
|
|
interface RaceHistoryProps {
|
|
driverId: string;
|
|
}
|
|
|
|
export default function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
|
|
const [filter, setFilter] = useState<'all' | 'wins' | 'podiums'>('all');
|
|
const [page, setPage] = useState(1);
|
|
const [loading, setLoading] = useState(true);
|
|
const resultsPerPage = 10;
|
|
|
|
useEffect(() => {
|
|
async function loadRaceHistory() {
|
|
try {
|
|
// Driver race history is not exposed via API yet.
|
|
// Keep as placeholder until an endpoint exists.
|
|
} catch (err) {
|
|
console.error('Failed to load race history:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
loadRaceHistory();
|
|
}, [driverId]);
|
|
|
|
const filteredResults: Array<unknown> = [];
|
|
|
|
const totalPages = Math.ceil(filteredResults.length / resultsPerPage);
|
|
const paginatedResults = filteredResults.slice(
|
|
(page - 1) * resultsPerPage,
|
|
page * resultsPerPage
|
|
);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-2">
|
|
{[1, 2, 3].map(i => (
|
|
<div key={i} className="h-9 w-24 bg-iron-gray rounded animate-pulse" />
|
|
))}
|
|
</div>
|
|
<Card>
|
|
<div className="space-y-2">
|
|
{[1, 2, 3].map(i => (
|
|
<div key={i} className="h-20 bg-deep-graphite rounded animate-pulse" />
|
|
))}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (filteredResults.length === 0) {
|
|
return (
|
|
<Card className="text-center py-12">
|
|
<p className="text-gray-400 mb-2">No race history yet</p>
|
|
<p className="text-sm text-gray-500">Complete races to build your racing record</p>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
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">
|
|
{/* No results until API provides driver results */}
|
|
</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>
|
|
);
|
|
}
|