55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
|
|
|
|
'use client';
|
|
|
|
import { ActiveDriverCard } from '@/ui/ActiveDriverCard';
|
|
import { mediaConfig } from '@/lib/config/mediaConfig';
|
|
import { SectionHeader } from '@/ui/SectionHeader';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Box } from '@/ui/Box';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Activity } from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
interface RecentActivityProps {
|
|
drivers: {
|
|
id: string;
|
|
name: string;
|
|
avatarUrl?: string;
|
|
isActive: boolean;
|
|
skillLevel?: string;
|
|
category?: string;
|
|
}[];
|
|
onDriverClick: (id: string) => void;
|
|
}
|
|
|
|
export function RecentActivity({ drivers, onDriverClick }: RecentActivityProps) {
|
|
const activeDrivers = drivers.filter((d) => d.isActive).slice(0, 6);
|
|
|
|
return (
|
|
<Box marginBottom={10}>
|
|
<SectionHeader
|
|
title="Active Drivers"
|
|
description="Currently competing in leagues"
|
|
variant="minimal"
|
|
actions={<Icon icon={Activity} size={5} intent="success" />}
|
|
/>
|
|
|
|
<Grid cols={{ base: 2, sm: 3, md: 4, lg: 6 }} gap={3}>
|
|
{activeDrivers.map((driver) => {
|
|
return (
|
|
<ActiveDriverCard
|
|
key={driver.id}
|
|
name={driver.name}
|
|
avatarUrl={driver.avatarUrl || mediaConfig.avatars.defaultFallback}
|
|
categoryLabel={driver.category}
|
|
skillLevelLabel={driver.skillLevel}
|
|
onClick={() => onDriverClick(driver.id)}
|
|
/>
|
|
);
|
|
})}
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
}
|