60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
|
|
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import { Button } from '@/ui/Button';
|
|
import { DashboardHero as UiDashboardHero } from '@/ui/DashboardHero';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Link } from '@/ui/Link';
|
|
import { StatBox } from '@/ui/StatBox';
|
|
import { Flag, Medal, Target, Trophy, User, Users } from 'lucide-react';
|
|
|
|
interface DashboardHeroProps {
|
|
currentDriver: {
|
|
name: string;
|
|
avatarUrl: string;
|
|
country: string;
|
|
rating: string | number;
|
|
rank: string | number;
|
|
totalRaces: string | number;
|
|
wins: string | number;
|
|
podiums: string | number;
|
|
consistency: string;
|
|
};
|
|
activeLeaguesCount: string | number;
|
|
}
|
|
|
|
export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHeroProps) {
|
|
return (
|
|
<UiDashboardHero
|
|
driverName={currentDriver.name}
|
|
avatarUrl={currentDriver.avatarUrl}
|
|
country={currentDriver.country}
|
|
rating={currentDriver.rating}
|
|
rank={currentDriver.rank}
|
|
totalRaces={currentDriver.totalRaces}
|
|
actions={
|
|
<>
|
|
<Link href={routes.public.leagues} variant="ghost">
|
|
<Button variant="secondary" icon={<Icon icon={Flag} size={4} />}>
|
|
Browse Leagues
|
|
</Button>
|
|
</Link>
|
|
<Link href={routes.protected.profile} variant="ghost">
|
|
<Button variant="primary" icon={<Icon icon={User} size={4} />}>
|
|
View Profile
|
|
</Button>
|
|
</Link>
|
|
</>
|
|
}
|
|
stats={
|
|
<>
|
|
<StatBox icon={Trophy} label="Wins" value={currentDriver.wins} color="var(--performance-green)" />
|
|
<StatBox icon={Medal} label="Podiums" value={currentDriver.podiums} color="var(--warning-amber)" />
|
|
<StatBox icon={Target} label="Consistency" value={currentDriver.consistency} color="var(--primary-blue)" />
|
|
<StatBox icon={Users} label="Active Leagues" value={activeLeaguesCount} color="var(--neon-purple)" />
|
|
</>
|
|
}
|
|
/>
|
|
);
|
|
}
|