- Driver data coming soon
+
);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0c325df..7e88ca5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -33,7 +33,7 @@ export default function RootLayout({
-
+
{children}
diff --git a/src/components/drivers/DriverCard.tsx b/src/components/drivers/DriverCard.tsx
new file mode 100644
index 0000000..77f213e
--- /dev/null
+++ b/src/components/drivers/DriverCard.tsx
@@ -0,0 +1,28 @@
+import Link from 'next/link';
+
+import { UserRound } from 'lucide-react';
+
+import type { DriverSeasonCard as DriverSeasonCardType } from '@/types/championship';
+
+interface DriverCardProps {
+ driver: DriverSeasonCardType;
+}
+
+export default function DriverCard({ driver }: DriverCardProps) {
+ return (
+
+
+
+
+
+ {driver.name}
+
+
+ );
+}
diff --git a/src/components/drivers/DriversExplorer.spec.tsx b/src/components/drivers/DriversExplorer.spec.tsx
new file mode 100644
index 0000000..93279ed
--- /dev/null
+++ b/src/components/drivers/DriversExplorer.spec.tsx
@@ -0,0 +1,131 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import DriversExplorer from './DriversExplorer';
+
+const seasonPayload = {
+ availableYears: [2024, 2023, 2022],
+ data: {
+ year: 2024,
+ drivers: [
+ {
+ id: '1',
+ name: 'Max Verstappen',
+ latestPoints: 437,
+ },
+ {
+ id: '16',
+ name: 'Charles Leclerc',
+ latestPoints: 356,
+ },
+ {
+ id: '63',
+ name: 'George Russell',
+ latestPoints: 245,
+ },
+ {
+ id: '99',
+ name: 'Zero Point Driver',
+ latestPoints: 0,
+ },
+ ],
+ },
+};
+
+describe('DriversExplorer', () => {
+ beforeEach(() => {
+ vi.restoreAllMocks();
+ });
+
+ it('loads the selected season and renders drivers in points order', async () => {
+ const fetchMock = vi.fn().mockResolvedValue({
+ ok: true,
+ json: async () => seasonPayload,
+ });
+
+ vi.stubGlobal('fetch', fetchMock);
+
+ render(
);
+
+ await waitFor(() => {
+ expect(fetchMock).toHaveBeenCalledWith(
+ '/api/drivers?year=2024',
+ expect.objectContaining({ cache: 'no-store', method: 'GET' }),
+ );
+ });
+
+ const list = await screen.findByRole('list', {
+ name: /drivers for 2024/i,
+ });
+ const names = within(list)
+ .getAllByRole('heading', { level: 2 })
+ .map((heading) => heading.textContent);
+
+ expect(names).toEqual([
+ 'Max Verstappen',
+ 'Charles Leclerc',
+ 'George Russell',
+ 'Zero Point Driver',
+ ]);
+ });
+
+ it('refetches when the season changes', async () => {
+ const user = userEvent.setup();
+ const fetchMock = vi
+ .fn()
+ .mockResolvedValueOnce({
+ ok: true,
+ json: async () => seasonPayload,
+ })
+ .mockResolvedValueOnce({
+ ok: true,
+ json: async () => ({
+ ...seasonPayload,
+ data: {
+ year: 2023,
+ drivers: [
+ {
+ id: '14',
+ name: 'Fernando Alonso',
+ latestPoints: 206,
+ },
+ ],
+ },
+ }),
+ });
+
+ vi.stubGlobal('fetch', fetchMock);
+
+ render(
);
+
+ expect(
+ await screen.findByRole('heading', { name: /max verstappen/i }),
+ ).toBeInTheDocument();
+
+ await user.selectOptions(screen.getByLabelText(/season/i), '2023');
+
+ expect(
+ await screen.findByRole('heading', { name: /fernando alonso/i }),
+ ).toBeInTheDocument();
+ expect(fetchMock).toHaveBeenLastCalledWith(
+ '/api/drivers?year=2023',
+ expect.objectContaining({ cache: 'no-store', method: 'GET' }),
+ );
+ });
+
+ it('shows an error state when the request fails', async () => {
+ const fetchMock = vi.fn().mockResolvedValue({
+ ok: false,
+ json: async () => ({ message: 'Unsupported driver season.' }),
+ });
+
+ vi.stubGlobal('fetch', fetchMock);
+
+ render(
);
+
+ expect(await screen.findByRole('alert')).toHaveTextContent(
+ /unsupported driver season/i,
+ );
+ });
+});
diff --git a/src/components/drivers/DriversExplorer.tsx b/src/components/drivers/DriversExplorer.tsx
new file mode 100644
index 0000000..56572a3
--- /dev/null
+++ b/src/components/drivers/DriversExplorer.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import YearSelect from '@/components/championships/YearSelect';
+import type { DriversSeasonResponse } from '@/types/championship';
+
+import DriverCard from './DriverCard';
+
+const defaultYears = [2024];
+
+function buildEndpoint(year: number) {
+ const query = new URLSearchParams({
+ year: String(year),
+ });
+
+ return `/api/drivers?${query.toString()}`;
+}
+
+export default function DriversExplorer() {
+ const [selectedYear, setSelectedYear] = useState
(2024);
+ const [availableYears, setAvailableYears] = useState(defaultYears);
+ const [payload, setPayload] = useState(null);
+ const [isLoading, setIsLoading] = useState(false);
+ const [errorMessage, setErrorMessage] = useState(null);
+
+ useEffect(() => {
+ const abortController = new AbortController();
+
+ async function loadDrivers() {
+ setIsLoading(true);
+ setErrorMessage(null);
+
+ try {
+ const response = await fetch(buildEndpoint(selectedYear), {
+ method: 'GET',
+ signal: abortController.signal,
+ cache: 'no-store',
+ });
+
+ if (!response.ok) {
+ const payload = (await response.json()) as { message?: string };
+ throw new Error(payload.message ?? 'Failed to load drivers.');
+ }
+
+ const nextPayload = (await response.json()) as DriversSeasonResponse;
+
+ setPayload(nextPayload);
+ setAvailableYears(nextPayload.availableYears);
+ } catch (error) {
+ if (abortController.signal.aborted) {
+ return;
+ }
+
+ const fallbackMessage = 'Failed to load drivers.';
+ setErrorMessage(
+ error instanceof Error ? error.message : fallbackMessage,
+ );
+ } finally {
+ if (!abortController.signal.aborted) {
+ setIsLoading(false);
+ }
+ }
+ }
+
+ void loadDrivers();
+
+ return () => {
+ abortController.abort();
+ };
+ }, [selectedYear]);
+
+ return (
+
+
+
+ {payload ? (
+
+ {payload.data.drivers.length} drivers in {payload.data.year}
+
+ ) : null}
+
+
+
+ {isLoading ? (
+
+ Loading drivers...
+
+ ) : null}
+
+ {!isLoading && errorMessage ? (
+
+
+ Unable to load drivers
+
+
{errorMessage}
+
+ ) : null}
+
+ {!isLoading && !errorMessage && payload ? (
+
+ {payload.data.drivers.map((driver) => (
+
+ ))}
+
+ ) : null}
+
+