110 lines
3.0 KiB
TypeScript
110 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { EmptyState } from '@/components/shared/state/EmptyState';
|
|
import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
|
|
import { Button } from '@/ui/Button';
|
|
import { Card } from '@/ui/Card';
|
|
import { Pagination } from '@/ui/Pagination';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Trophy } from 'lucide-react';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
interface RaceHistoryProps {
|
|
driverId: string;
|
|
}
|
|
|
|
export 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);
|
|
|
|
if (loading) {
|
|
return (
|
|
<Stack gap={4}>
|
|
<Stack display="flex" alignItems="center" gap={2}>
|
|
{[1, 2, 3].map(i => (
|
|
<Stack key={i} h="9" w="24" bg="bg-iron-gray" rounded="md" animate="pulse" />
|
|
))}
|
|
</Stack>
|
|
<Card>
|
|
<LoadingWrapper variant="skeleton" skeletonCount={3} />
|
|
</Card>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
if (filteredResults.length === 0) {
|
|
return (
|
|
<EmptyState
|
|
icon={Trophy}
|
|
title="No race history yet"
|
|
description="Complete races to build your racing record"
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Stack gap={4}>
|
|
<Stack display="flex" alignItems="center" gap={2}>
|
|
<Button
|
|
variant={filter === 'all' ? 'primary' : 'secondary'}
|
|
onClick={() => { setFilter('all'); setPage(1); }}
|
|
size="sm"
|
|
>
|
|
All Races
|
|
</Button>
|
|
<Button
|
|
variant={filter === 'wins' ? 'primary' : 'secondary'}
|
|
onClick={() => { setFilter('wins'); setPage(1); }}
|
|
size="sm"
|
|
>
|
|
Wins Only
|
|
</Button>
|
|
<Button
|
|
variant={filter === 'podiums' ? 'primary' : 'secondary'}
|
|
onClick={() => { setFilter('podiums'); setPage(1); }}
|
|
size="sm"
|
|
>
|
|
Podiums
|
|
</Button>
|
|
</Stack>
|
|
|
|
<Card>
|
|
{/* No results until API provides driver results */}
|
|
<Stack minHeight="100px" display="flex" center>
|
|
<Text color="text-gray-500">No results found for the selected filter.</Text>
|
|
</Stack>
|
|
|
|
<Pagination
|
|
currentPage={page}
|
|
totalPages={totalPages}
|
|
totalItems={filteredResults.length}
|
|
itemsPerPage={resultsPerPage}
|
|
onPageChange={setPage}
|
|
/>
|
|
</Card>
|
|
</Stack>
|
|
);
|
|
}
|