website refactor
This commit is contained in:
@@ -1,142 +1,146 @@
|
||||
import React, { ReactNode } from 'react';
|
||||
import React from 'react';
|
||||
import { Box } from './primitives/Box';
|
||||
import { Heading } from './Heading';
|
||||
import { Image } from './Image';
|
||||
import { Stack } from './primitives/Stack';
|
||||
import { Text } from './Text';
|
||||
import { Glow } from './Glow';
|
||||
import { Heading } from './Heading';
|
||||
import { Avatar } from './Avatar';
|
||||
import { Badge } from './Badge';
|
||||
import { Trophy, Flag, Users, Star } from 'lucide-react';
|
||||
import { Icon } from './Icon';
|
||||
|
||||
interface DashboardHeroProps {
|
||||
driverName: string;
|
||||
avatarUrl: string;
|
||||
country: string;
|
||||
rating: string | number;
|
||||
rank: string | number;
|
||||
totalRaces: string | number;
|
||||
actions?: ReactNode;
|
||||
stats?: ReactNode;
|
||||
avatarUrl?: string | null;
|
||||
rating: number;
|
||||
rank: number;
|
||||
totalRaces: number;
|
||||
winRate: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* DashboardHero
|
||||
*
|
||||
* Redesigned for "Precision Racing Minimal" theme.
|
||||
* Uses subtle accent glows and crisp separators.
|
||||
*/
|
||||
export function DashboardHero({
|
||||
driverName,
|
||||
avatarUrl,
|
||||
country,
|
||||
rating,
|
||||
rank,
|
||||
totalRaces,
|
||||
actions,
|
||||
stats,
|
||||
winRate,
|
||||
className = '',
|
||||
}: DashboardHeroProps) {
|
||||
return (
|
||||
<Box
|
||||
as="section"
|
||||
position="relative"
|
||||
className={`bg-[#0C0D0F] border-b border-[#23272B] overflow-hidden ${className}`}
|
||||
<Box
|
||||
position="relative"
|
||||
bg="bg-[#0C0D0F]"
|
||||
borderBottom
|
||||
borderColor="border-[#23272B]"
|
||||
overflow="hidden"
|
||||
className={className}
|
||||
>
|
||||
{/* Subtle Accent Glow */}
|
||||
<Glow
|
||||
position="top-right"
|
||||
color="primary"
|
||||
opacity={0.1}
|
||||
size="xl"
|
||||
{/* Background Glow */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top={-100}
|
||||
right={-100}
|
||||
w="500px"
|
||||
h="500px"
|
||||
bg="bg-primary-blue/10"
|
||||
rounded="full"
|
||||
blur="3xl"
|
||||
/>
|
||||
|
||||
<Box
|
||||
maxWidth="80rem"
|
||||
mx="auto"
|
||||
px={6}
|
||||
py={8}
|
||||
position="relative"
|
||||
zIndex={1}
|
||||
>
|
||||
<Box display="flex" flexDirection="col" gap={8}>
|
||||
<Box display="flex" align="center" justify="between" wrap gap={6}>
|
||||
{/* Driver Identity */}
|
||||
<Box display="flex" align="center" gap={6}>
|
||||
<Box position="relative">
|
||||
<Box
|
||||
w="24"
|
||||
h="24"
|
||||
className="border border-[#23272B] p-1 bg-[#141619]"
|
||||
>
|
||||
<Image
|
||||
src={avatarUrl}
|
||||
alt={driverName}
|
||||
width={96}
|
||||
height={96}
|
||||
className="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-300"
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
position="absolute"
|
||||
bottom="-1"
|
||||
right="-1"
|
||||
w="4"
|
||||
h="4"
|
||||
className="bg-[#4ED4E0] border-2 border-[#0C0D0F]"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Box display="flex" align="center" gap={3} mb={1}>
|
||||
<Text size="xs" color="text-gray-500" uppercase weight="bold" letterSpacing="widest">
|
||||
Driver Profile
|
||||
</Text>
|
||||
<Text size="xs" color="text-gray-600">
|
||||
/
|
||||
</Text>
|
||||
<Text size="xs" color="text-gray-400">
|
||||
{country}
|
||||
</Text>
|
||||
</Box>
|
||||
<Heading level={1} className="text-3xl md:text-4xl font-black uppercase tracking-tighter mb-2">
|
||||
{driverName}
|
||||
</Heading>
|
||||
<Box display="flex" align="center" gap={4}>
|
||||
<Box display="flex" align="center" gap={2}>
|
||||
<Text size="xs" color="text-gray-500" uppercase>Rating</Text>
|
||||
<Text size="sm" weight="bold" className="text-[#4ED4E0] font-mono">{rating}</Text>
|
||||
</Box>
|
||||
<Box display="flex" align="center" gap={2}>
|
||||
<Text size="xs" color="text-gray-500" uppercase>Rank</Text>
|
||||
<Text size="sm" weight="bold" className="text-[#FFBE4D] font-mono">#{rank}</Text>
|
||||
</Box>
|
||||
<Box display="flex" align="center" gap={2}>
|
||||
<Text size="xs" color="text-gray-500" uppercase>Starts</Text>
|
||||
<Text size="sm" weight="bold" className="text-gray-300 font-mono">{totalRaces}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<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>
|
||||
|
||||
{/* Actions */}
|
||||
{actions && (
|
||||
<Box display="flex" gap={3}>
|
||||
{actions}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Stats Grid */}
|
||||
{stats && (
|
||||
<Box
|
||||
display="grid"
|
||||
gridCols={2}
|
||||
responsiveGridCols={{ md: 4 }}
|
||||
gap={4}
|
||||
className="border-t border-[#23272B]/50 pt-6"
|
||||
>
|
||||
{stats}
|
||||
{/* 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>
|
||||
)}
|
||||
</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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user