102 lines
5.0 KiB
TypeScript
102 lines
5.0 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Trophy, Medal, Target, Users, Flag, User } from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Image } from '@/ui/Image';
|
|
import { Button } from '@/ui/Button';
|
|
import { Link } from '@/ui/Link';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { StatBox } from './StatBox';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
|
|
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 (
|
|
<Box as="section" style={{ position: 'relative', overflow: 'hidden' }}>
|
|
{/* Background Pattern */}
|
|
<Box style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.1), #0f1115, rgba(147, 51, 234, 0.05))' }} />
|
|
|
|
<Box style={{ position: 'relative', maxWidth: '80rem', margin: '0 auto', padding: '2.5rem 1.5rem' }}>
|
|
<Stack gap={8}>
|
|
<Stack direction="row" align="center" justify="between" wrap gap={8}>
|
|
{/* Welcome Message */}
|
|
<Stack direction="row" align="start" gap={5}>
|
|
<Box style={{ position: 'relative' }}>
|
|
<Box style={{ width: '5rem', height: '5rem', borderRadius: '1rem', background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)', padding: '0.125rem', boxShadow: '0 20px 25px -5px rgba(59, 130, 246, 0.2)' }}>
|
|
<Box style={{ width: '100%', height: '100%', borderRadius: '0.75rem', overflow: 'hidden', backgroundColor: '#262626' }}>
|
|
<Image
|
|
src={currentDriver.avatarUrl}
|
|
alt={currentDriver.name}
|
|
width={80}
|
|
height={80}
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
<Box style={{ position: 'absolute', bottom: '-0.25rem', right: '-0.25rem', width: '1.25rem', height: '1.25rem', borderRadius: '9999px', backgroundColor: '#10b981', border: '3px solid #0f1115' }} />
|
|
</Box>
|
|
<Box>
|
|
<Text size="sm" color="text-gray-400" block mb={1}>Good morning,</Text>
|
|
<Heading level={1} style={{ marginBottom: '0.5rem' }}>
|
|
{currentDriver.name}
|
|
<Text size="2xl" style={{ marginLeft: '0.75rem' }}>{currentDriver.country}</Text>
|
|
</Heading>
|
|
<Stack direction="row" align="center" gap={3} wrap>
|
|
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)', border: '1px solid rgba(59, 130, 246, 0.3)', paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
|
|
<Text size="sm" weight="semibold" color="text-primary-blue">{currentDriver.rating}</Text>
|
|
</Surface>
|
|
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(250, 204, 21, 0.1)', border: '1px solid rgba(250, 204, 21, 0.3)', paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
|
|
<Text size="sm" weight="semibold" style={{ color: '#facc15' }}>#{currentDriver.rank}</Text>
|
|
</Surface>
|
|
<Text size="xs" color="text-gray-500">{currentDriver.totalRaces} races completed</Text>
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
|
|
{/* Quick Actions */}
|
|
<Stack direction="row" gap={3} wrap>
|
|
<Link href={routes.public.leagues} variant="ghost">
|
|
<Button variant="secondary" icon={<Flag style={{ width: '1rem', height: '1rem' }} />}>
|
|
Browse Leagues
|
|
</Button>
|
|
</Link>
|
|
<Link href={routes.protected.profile} variant="ghost">
|
|
<Button variant="primary" icon={<User style={{ width: '1rem', height: '1rem' }} />}>
|
|
View Profile
|
|
</Button>
|
|
</Link>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Quick Stats Row */}
|
|
<Box style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '1rem' }}>
|
|
{/* At md this should be 4 columns */}
|
|
<StatBox icon={Trophy} label="Wins" value={currentDriver.wins} color="#10b981" />
|
|
<StatBox icon={Medal} label="Podiums" value={currentDriver.podiums} color="#f59e0b" />
|
|
<StatBox icon={Target} label="Consistency" value={currentDriver.consistency} color="#3b82f6" />
|
|
<StatBox icon={Users} label="Active Leagues" value={activeLeaguesCount} color="#a855f7" />
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|