74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import { Flag, Star, Trophy, Users } from 'lucide-react';
|
|
import { Avatar } from '../../ui/Avatar';
|
|
import { Badge } from '../../ui/Badge';
|
|
import { Heading } from '../../ui/Heading';
|
|
import { Icon } from '../../ui/Icon';
|
|
import { ProfileHero, ProfileAvatar, ProfileStatsGroup, ProfileStat } from '../../ui/ProfileHero';
|
|
import { BadgeGroup } from '../../ui/BadgeGroup';
|
|
import { QuickStatCard, QuickStatItem } from '../../ui/QuickStatCard';
|
|
import React from 'react';
|
|
|
|
interface DashboardHeroProps {
|
|
driverName: string;
|
|
avatarUrl?: string | null;
|
|
rating: number;
|
|
rank: number;
|
|
totalRaces: number;
|
|
winRate: number;
|
|
}
|
|
|
|
export function DashboardHero({
|
|
driverName,
|
|
avatarUrl,
|
|
rating,
|
|
rank,
|
|
totalRaces,
|
|
winRate,
|
|
}: DashboardHeroProps) {
|
|
return (
|
|
<ProfileHero glowColor="aqua">
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '2rem', flexWrap: 'wrap' }}>
|
|
{/* Avatar Section */}
|
|
<ProfileAvatar
|
|
badge={<Icon icon={Star} size={5} intent="high" />}
|
|
>
|
|
<Avatar
|
|
src={avatarUrl || undefined}
|
|
alt={driverName}
|
|
size="xl"
|
|
/>
|
|
</ProfileAvatar>
|
|
|
|
{/* Info Section */}
|
|
<div style={{ flex: 1, minWidth: '200px' }}>
|
|
<Heading level={1}>{driverName}</Heading>
|
|
|
|
<ProfileStatsGroup>
|
|
<ProfileStat label="Rating" value={rating} intent="telemetry" />
|
|
<ProfileStat label="Rank" value={`#${rank}`} intent="warning" />
|
|
<ProfileStat label="Starts" value={totalRaces} intent="low" />
|
|
</ProfileStatsGroup>
|
|
|
|
<BadgeGroup>
|
|
<Badge variant="primary" icon={Trophy}>
|
|
{winRate}% Win Rate
|
|
</Badge>
|
|
<Badge variant="info" icon={Flag}>
|
|
Pro License
|
|
</Badge>
|
|
<Badge variant="default" icon={Users}>
|
|
Team Redline
|
|
</Badge>
|
|
</BadgeGroup>
|
|
</div>
|
|
|
|
{/* Quick Stats */}
|
|
<QuickStatCard>
|
|
<QuickStatItem label="Podiums" value="12" />
|
|
<QuickStatItem label="Wins" value="4" />
|
|
</QuickStatCard>
|
|
</div>
|
|
</ProfileHero>
|
|
);
|
|
}
|