140 lines
3.8 KiB
TypeScript
140 lines
3.8 KiB
TypeScript
|
|
|
|
import { ReactNode } from 'react';
|
|
import { Badge } from './Badge';
|
|
import { Box } from './Box';
|
|
import { Heading } from './Heading';
|
|
import { Image } from './Image';
|
|
import { Stack } from './Stack';
|
|
|
|
interface DashboardHeroProps {
|
|
driverName: string;
|
|
avatarUrl: string;
|
|
country: string;
|
|
rating: string | number;
|
|
rank: string | number;
|
|
totalRaces: string | number;
|
|
actions?: ReactNode;
|
|
stats?: ReactNode;
|
|
}
|
|
|
|
export function DashboardHero({
|
|
driverName,
|
|
avatarUrl,
|
|
country,
|
|
rating,
|
|
rank,
|
|
totalRaces,
|
|
actions,
|
|
stats,
|
|
}: DashboardHeroProps) {
|
|
return (
|
|
<Box as="section" position="relative" overflow="hidden">
|
|
{/* Background Pattern */}
|
|
<Box
|
|
position="absolute"
|
|
inset="0"
|
|
style={{
|
|
background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.1), #0f1115, rgba(147, 51, 234, 0.05))',
|
|
}}
|
|
/>
|
|
|
|
<Box
|
|
position="relative"
|
|
maxWidth="80rem"
|
|
mx="auto"
|
|
px={6}
|
|
py={10}
|
|
>
|
|
<Stack gap={8}>
|
|
<Stack direction="row" align="center" justify="between" wrap gap={8}>
|
|
{/* Welcome Message */}
|
|
<Stack direction="row" align="start" gap={5}>
|
|
<Box position="relative">
|
|
<Box
|
|
w="20"
|
|
h="20"
|
|
rounded="xl"
|
|
p={0.5}
|
|
style={{
|
|
background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)',
|
|
boxShadow: '0 20px 25px -5px rgba(59, 130, 246, 0.2)',
|
|
}}
|
|
>
|
|
<Box
|
|
w="full"
|
|
h="full"
|
|
rounded="lg"
|
|
overflow="hidden"
|
|
bg="bg-deep-graphite"
|
|
>
|
|
<Image
|
|
src={avatarUrl}
|
|
alt={driverName}
|
|
width={80}
|
|
height={80}
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
position="absolute"
|
|
bottom="-1"
|
|
right="-1"
|
|
w="5"
|
|
h="5"
|
|
rounded="full"
|
|
bg="bg-performance-green"
|
|
border
|
|
style={{ borderColor: '#0f1115', borderWidth: '3px' }}
|
|
/>
|
|
</Box>
|
|
<Box>
|
|
<Text size="sm" color="text-gray-400" block mb={1}>
|
|
Good morning,
|
|
</Text>
|
|
<Heading level={1} mb={2}>
|
|
{driverName}
|
|
<Text size="2xl" ml={3}>
|
|
{country}
|
|
</Text>
|
|
</Heading>
|
|
<Stack direction="row" align="center" gap={3} wrap>
|
|
<Badge variant="primary">
|
|
{rating}
|
|
</Badge>
|
|
<Badge variant="warning">
|
|
#{rank}
|
|
</Badge>
|
|
<Text size="xs" color="text-gray-500">
|
|
{totalRaces} races completed
|
|
</Text>
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
|
|
{/* Quick Actions */}
|
|
{actions && (
|
|
<Stack direction="row" gap={3} wrap>
|
|
{actions}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
|
|
{/* Quick Stats Row */}
|
|
{stats && (
|
|
<Box
|
|
display="grid"
|
|
gridCols={2}
|
|
responsiveGridCols={{ md: 4 }}
|
|
gap={4}
|
|
>
|
|
{stats}
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|