147 lines
4.3 KiB
TypeScript
147 lines
4.3 KiB
TypeScript
import { Flag, Star, Trophy, Users } from 'lucide-react';
|
|
import { Avatar } from './Avatar';
|
|
import { Badge } from './Badge';
|
|
import { Box } from './Box';
|
|
import { Heading } from './Heading';
|
|
import { Icon } from './Icon';
|
|
import { Stack } from './Stack';
|
|
import { Text } from './Text';
|
|
|
|
interface DashboardHeroProps {
|
|
driverName: string;
|
|
avatarUrl?: string | null;
|
|
rating: number;
|
|
rank: number;
|
|
totalRaces: number;
|
|
winRate: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function DashboardHero({
|
|
driverName,
|
|
avatarUrl,
|
|
rating,
|
|
rank,
|
|
totalRaces,
|
|
winRate,
|
|
className = '',
|
|
}: DashboardHeroProps) {
|
|
return (
|
|
<Box
|
|
position="relative"
|
|
bg="bg-[#0C0D0F]"
|
|
borderBottom
|
|
borderColor="border-[#23272B]"
|
|
overflow="hidden"
|
|
className={className}
|
|
>
|
|
{/* Background Glow */}
|
|
<Box
|
|
position="absolute"
|
|
top={-100}
|
|
right={-100}
|
|
w="500px"
|
|
h="500px"
|
|
bg="bg-primary-blue/10"
|
|
rounded="full"
|
|
blur="3xl"
|
|
/>
|
|
|
|
<Box p={{ base: 6, md: 10 }} position="relative" zIndex={10}>
|
|
<Stack direction={{ base: 'col', md: 'row' }} align="center" gap={8}>
|
|
{/* Avatar Section */}
|
|
<Box position="relative">
|
|
<Box
|
|
p={1}
|
|
rounded="2xl"
|
|
bg="bg-[#141619]"
|
|
border
|
|
borderColor="border-[#23272B]"
|
|
>
|
|
<Avatar
|
|
src={avatarUrl || undefined}
|
|
alt={driverName}
|
|
size={120}
|
|
className="rounded-xl"
|
|
/>
|
|
</Box>
|
|
<Box
|
|
position="absolute"
|
|
bottom={-2}
|
|
right={-2}
|
|
w="10"
|
|
h="10"
|
|
rounded="xl"
|
|
bg="bg-[#4ED4E0]"
|
|
borderWidth="2px"
|
|
borderStyle="solid"
|
|
borderColor="border-[#0C0D0F]"
|
|
display="flex"
|
|
center
|
|
>
|
|
<Icon icon={Star} size={5} color="#0C0D0F" />
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Info Section */}
|
|
<Stack flex={1} align={{ base: 'center', md: 'start' }} gap={4}>
|
|
<Box>
|
|
<Heading level={1} uppercase letterSpacing="tighter" mb={2}>
|
|
{driverName}
|
|
</Heading>
|
|
<Stack direction="row" gap={4}>
|
|
<Stack gap={0.5}>
|
|
<Text size="xs" color="text-gray-500" uppercase>Rating</Text>
|
|
<Text size="sm" weight="bold" color="text-[#4ED4E0]" font="mono">{rating}</Text>
|
|
</Stack>
|
|
<Stack gap={0.5}>
|
|
<Text size="xs" color="text-gray-500" uppercase>Rank</Text>
|
|
<Text size="sm" weight="bold" color="text-[#FFBE4D]" font="mono">#{rank}</Text>
|
|
</Stack>
|
|
<Stack gap={0.5}>
|
|
<Text size="xs" color="text-gray-500" uppercase>Starts</Text>
|
|
<Text size="sm" weight="bold" color="text-gray-300" font="mono">{totalRaces}</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Box>
|
|
|
|
<Stack direction="row" gap={3} wrap>
|
|
<Badge variant="primary" rounded="lg" icon={Trophy}>
|
|
{winRate}% Win Rate
|
|
</Badge>
|
|
<Badge variant="info" rounded="lg" icon={Flag}>
|
|
Pro License
|
|
</Badge>
|
|
<Badge variant="default" rounded="lg" icon={Users}>
|
|
Team Redline
|
|
</Badge>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Quick Stats */}
|
|
<Stack
|
|
direction="row"
|
|
gap={4}
|
|
p={6}
|
|
bg="bg-white/5"
|
|
rounded="2xl"
|
|
border
|
|
borderColor="border-white/10"
|
|
className="backdrop-blur-md"
|
|
>
|
|
<Stack align="center" px={4}>
|
|
<Text size="2xl" weight="bold" color="text-white">12</Text>
|
|
<Text size="xs" color="text-gray-500" uppercase>Podiums</Text>
|
|
</Stack>
|
|
<Box w="1px" h="10" bg="bg-white/10" />
|
|
<Stack align="center" px={4}>
|
|
<Text size="2xl" weight="bold" color="text-white">4</Text>
|
|
<Text size="xs" color="text-gray-500" uppercase>Wins</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|