74 lines
3.3 KiB
TypeScript
74 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { Activity } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
import { mediaConfig } from '@/lib/config/mediaConfig';
|
|
import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
|
|
|
|
const SKILL_LEVELS = [
|
|
{ id: 'pro', label: 'Pro', color: 'text-yellow-400' },
|
|
{ id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
|
|
{ id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
|
|
{ id: 'beginner', label: 'Beginner', color: 'text-green-400' },
|
|
];
|
|
|
|
const CATEGORIES = [
|
|
{ id: 'beginner', label: 'Beginner', color: 'text-green-400' },
|
|
{ id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
|
|
{ id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
|
|
{ id: 'pro', label: 'Pro', color: 'text-yellow-400' },
|
|
{ id: 'endurance', label: 'Endurance', color: 'text-orange-400' },
|
|
{ id: 'sprint', label: 'Sprint', color: 'text-red-400' },
|
|
];
|
|
|
|
interface RecentActivityProps {
|
|
drivers: DriverLeaderboardItemViewModel[];
|
|
onDriverClick: (id: string) => void;
|
|
}
|
|
|
|
export function RecentActivity({ drivers, onDriverClick }: RecentActivityProps) {
|
|
const activeDrivers = drivers.filter((d) => d.isActive).slice(0, 6);
|
|
|
|
return (
|
|
<div className="mb-10">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-performance-green/10 border border-performance-green/20">
|
|
<Activity className="w-5 h-5 text-performance-green" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-white">Active Drivers</h2>
|
|
<p className="text-xs text-gray-500">Currently competing in leagues</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
|
|
{activeDrivers.map((driver) => {
|
|
const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
|
|
const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
|
|
return (
|
|
<button
|
|
key={driver.id}
|
|
type="button"
|
|
onClick={() => onDriverClick(driver.id)}
|
|
className="p-3 rounded-xl bg-iron-gray/40 border border-charcoal-outline hover:border-performance-green/40 transition-all group text-center"
|
|
>
|
|
<div className="relative w-12 h-12 mx-auto rounded-full overflow-hidden border-2 border-charcoal-outline mb-2">
|
|
<Image src={driver.avatarUrl || mediaConfig.avatars.defaultFallback} alt={driver.name} fill className="object-cover" />
|
|
<div className="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-performance-green border-2 border-iron-gray" />
|
|
</div>
|
|
<p className="text-sm font-medium text-white truncate group-hover:text-performance-green transition-colors">
|
|
{driver.name}
|
|
</p>
|
|
<div className="flex items-center justify-center gap-1 text-xs">
|
|
{categoryConfig && (
|
|
<span className={categoryConfig.color}>{categoryConfig.label}</span>
|
|
)}
|
|
<span className={levelConfig?.color}>{levelConfig?.label}</span>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |