86 lines
2.4 KiB
TypeScript
86 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 { PageHeader } from '@/ui/PageHeader';
|
|
import { Input } from '@/ui/Input';
|
|
import { Box } from '@/ui/Box';
|
|
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>
|
|
<Box marginBottom={8}>
|
|
<PageHeader
|
|
icon={Users}
|
|
title="Drivers"
|
|
description="Global driver roster and statistics."
|
|
action={
|
|
<Box
|
|
as="button"
|
|
onClick={onViewLeaderboard}
|
|
className="px-4 py-2 rounded-md bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] text-sm font-medium hover:bg-[var(--ui-color-bg-surface-muted)] transition-colors"
|
|
>
|
|
Leaderboard
|
|
</Box>
|
|
}
|
|
/>
|
|
</Box>
|
|
|
|
<Box marginBottom={8}>
|
|
<DriverStatsHeader
|
|
totalDrivers={viewData.totalDriversLabel}
|
|
activeDrivers={viewData.activeCountLabel}
|
|
totalRaces={viewData.totalRacesLabel}
|
|
/>
|
|
</Box>
|
|
|
|
<Box marginBottom={6} className="w-full">
|
|
<Input
|
|
placeholder="Search drivers by name or nationality..."
|
|
value={searchQuery}
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
|
icon={Search}
|
|
variant="search"
|
|
/>
|
|
</Box>
|
|
|
|
{filteredDrivers.length > 0 ? (
|
|
<Box display="grid" gap={4} className="grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
{filteredDrivers.map(driver => (
|
|
<DriverCard
|
|
key={driver.id}
|
|
driver={driver}
|
|
onClick={onDriverClick}
|
|
/>
|
|
))}
|
|
</Box>
|
|
) : (
|
|
<EmptyState
|
|
title="No drivers found"
|
|
description={`No drivers match "${searchQuery}"`}
|
|
icon={Search}
|
|
/>
|
|
)}
|
|
</main>
|
|
);
|
|
}
|