website refactor
This commit is contained in:
@@ -3,9 +3,10 @@ import { Avatar } from '../../ui/Avatar';
|
||||
import { Badge } from '../../ui/Badge';
|
||||
import { Heading } from '../../ui/Heading';
|
||||
import { Icon } from '../../ui/Icon';
|
||||
import { Box } from '../../ui/primitives/Box';
|
||||
import { Stack } from '../../ui/primitives/Stack';
|
||||
import { Text } from '../../ui/Text';
|
||||
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;
|
||||
@@ -14,7 +15,6 @@ interface DashboardHeroProps {
|
||||
rank: number;
|
||||
totalRaces: number;
|
||||
winRate: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function DashboardHero({
|
||||
@@ -24,123 +24,50 @@ export function DashboardHero({
|
||||
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"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<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}
|
||||
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 */}
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
{/* Quick Stats */}
|
||||
<QuickStatCard>
|
||||
<QuickStatItem label="Podiums" value="12" />
|
||||
<QuickStatItem label="Wins" value="4" />
|
||||
</QuickStatCard>
|
||||
</div>
|
||||
</ProfileHero>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user