79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { DriversDirectoryHeader } from '@/components/drivers/DriversDirectoryHeader';
|
|
import { DriverSearchBar } from '@/components/drivers/DriverSearchBar';
|
|
import { DriverTable } from '@/components/drivers/DriverTable';
|
|
import { DriverTableRow } from '@/components/drivers/DriverTableRow';
|
|
import { EmptyState } from '@/ui/EmptyState';
|
|
import type { DriversViewData } from '@/lib/types/view-data/DriversViewData';
|
|
import { Container } from '@/ui/Container';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Search } from 'lucide-react';
|
|
|
|
interface DriversTemplateProps {
|
|
viewData: DriversViewData | null;
|
|
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) {
|
|
const drivers = viewData?.drivers || [];
|
|
const totalRaces = viewData?.totalRaces || 0;
|
|
const totalWins = viewData?.totalWins || 0;
|
|
const activeCount = viewData?.activeCount || 0;
|
|
|
|
return (
|
|
<Container size="lg" py={8}>
|
|
<Stack gap={10}>
|
|
<DriversDirectoryHeader
|
|
totalDrivers={drivers.length}
|
|
activeDrivers={activeCount}
|
|
totalWins={totalWins}
|
|
totalRaces={totalRaces}
|
|
onViewLeaderboard={onViewLeaderboard}
|
|
/>
|
|
|
|
<DriverSearchBar query={searchQuery} onChange={onSearchChange} />
|
|
|
|
<DriverTable>
|
|
{filteredDrivers.map((driver, index) => (
|
|
<DriverTableRow
|
|
key={driver.id}
|
|
rank={index + 1}
|
|
name={driver.name}
|
|
avatarUrl={driver.avatarUrl}
|
|
nationality={driver.nationality}
|
|
rating={driver.rating}
|
|
wins={driver.wins}
|
|
onClick={() => onDriverClick(driver.id)}
|
|
/>
|
|
))}
|
|
</DriverTable>
|
|
|
|
{filteredDrivers.length === 0 && (
|
|
<EmptyState
|
|
icon={Search}
|
|
title="No drivers found"
|
|
description={`No drivers found matching "${searchQuery}"`}
|
|
action={{
|
|
label: 'Clear search',
|
|
onClick: () => onSearchChange(''),
|
|
variant: 'secondary'
|
|
}}
|
|
/>
|
|
)}
|
|
</Stack>
|
|
</Container>
|
|
);
|
|
}
|