87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { DriversViewData } from '@/lib/types/view-data/DriversViewData';
|
|
import { DriverCard } from '@/components/drivers/DriverCard';
|
|
import { DriverStatsHeader } from '@/components/drivers/DriverStatsHeader';
|
|
import { DriverGrid } from '@/components/drivers/DriverGrid';
|
|
import { PageHeader } from '@/ui/PageHeader';
|
|
import { Section } from '@/ui/Section';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Input } from '@/ui/Input';
|
|
import { Button } from '@/ui/Button';
|
|
import { Container } from '@/ui/Container';
|
|
import { Search, Users } from 'lucide-react';
|
|
import { EmptyState } from '@/ui/EmptyState';
|
|
|
|
interface DriversTemplateProps {
|
|
viewData: DriversViewData;
|
|
searchQuery: string;
|
|
onSearchChange: (query: string) => void;
|
|
filteredDrivers: DriversViewData['drivers'];
|
|
onDriverClick: (id: string) => void;
|
|
onViewLeaderboard: () => void;
|
|
}
|
|
|
|
export function DriversTemplate({
|
|
viewData,
|
|
searchQuery,
|
|
onSearchChange,
|
|
filteredDrivers,
|
|
onDriverClick,
|
|
onViewLeaderboard
|
|
}: DriversTemplateProps) {
|
|
return (
|
|
<main>
|
|
<Section variant="default" padding="md">
|
|
<PageHeader
|
|
title="Drivers"
|
|
description="Global driver roster and statistics."
|
|
icon={Users}
|
|
action={
|
|
<Button
|
|
variant="secondary"
|
|
onClick={onViewLeaderboard}
|
|
>
|
|
Leaderboard
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
<Stack gap={12}>
|
|
<DriverStatsHeader
|
|
totalDrivers={viewData.totalDriversLabel}
|
|
activeDrivers={viewData.activeCountLabel}
|
|
totalRaces={viewData.totalRacesLabel}
|
|
/>
|
|
|
|
<Input
|
|
placeholder="Search drivers by name or nationality..."
|
|
value={searchQuery}
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
|
icon={Search}
|
|
variant="search"
|
|
/>
|
|
|
|
{filteredDrivers.length > 0 ? (
|
|
<DriverGrid>
|
|
{filteredDrivers.map(driver => (
|
|
<DriverCard
|
|
key={driver.id}
|
|
driver={driver}
|
|
onClick={onDriverClick}
|
|
/>
|
|
))}
|
|
</DriverGrid>
|
|
) : (
|
|
<EmptyState
|
|
title="No drivers found"
|
|
description={`No drivers match "${searchQuery}"`}
|
|
icon={Search}
|
|
/>
|
|
)}
|
|
</Stack>
|
|
</Section>
|
|
</main>
|
|
);
|
|
}
|