66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { DashboardHero as UiDashboardHero } from '@/components/dashboard/DashboardHero';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import { Button } from '@/ui/Button';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Link } from '@/ui/Link';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { StatGrid } from '@/ui/StatGrid';
|
|
import { Flag, Medal, Target, Trophy, User, Users } from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
interface DashboardHeroProps {
|
|
currentDriver: {
|
|
name: string;
|
|
avatarUrl: string;
|
|
country: string;
|
|
rating: number;
|
|
rank: number;
|
|
totalRaces: number;
|
|
wins: number;
|
|
podiums: number;
|
|
consistency: string;
|
|
};
|
|
activeLeaguesCount: number;
|
|
}
|
|
|
|
export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHeroProps) {
|
|
return (
|
|
<Stack gap={8}>
|
|
<UiDashboardHero
|
|
driverName={currentDriver.name}
|
|
avatarUrl={currentDriver.avatarUrl}
|
|
rating={currentDriver.rating}
|
|
rank={currentDriver.rank}
|
|
totalRaces={currentDriver.totalRaces}
|
|
winRate={Math.round((currentDriver.wins / currentDriver.totalRaces) * 100) || 0}
|
|
/>
|
|
|
|
<Stack direction="row" gap={4} wrap>
|
|
<Link href={routes.public.leagues}>
|
|
<Button variant="secondary" icon={<Icon icon={Flag} size={4} />}>
|
|
Browse Leagues
|
|
</Button>
|
|
</Link>
|
|
<Link href={routes.protected.profile}>
|
|
<Button variant="primary" icon={<Icon icon={User} size={4} />}>
|
|
View Profile
|
|
</Button>
|
|
</Link>
|
|
</Stack>
|
|
|
|
<StatGrid
|
|
variant="box"
|
|
columns={{ base: 2, md: 4 }}
|
|
stats={[
|
|
{ icon: Trophy, label: 'Wins', value: currentDriver.wins, intent: 'success' },
|
|
{ icon: Medal, label: 'Podiums', value: currentDriver.podiums, intent: 'warning' },
|
|
{ icon: Target, label: 'Consistency', value: currentDriver.consistency, intent: 'primary' },
|
|
{ icon: Users, label: 'Active Leagues', value: activeLeaguesCount, intent: 'telemetry' },
|
|
]}
|
|
/>
|
|
</Stack>
|
|
);
|
|
}
|