website refactor
This commit is contained in:
@@ -1,12 +1,9 @@
|
||||
|
||||
|
||||
import { ReactNode } from 'react';
|
||||
import { Badge } from './Badge';
|
||||
import React, { ReactNode } from 'react';
|
||||
import { Box } from './Box';
|
||||
import { Heading } from './Heading';
|
||||
import { Image } from './Image';
|
||||
import { Stack } from './Stack';
|
||||
import { Text } from './Text';
|
||||
import { Glow } from './Glow';
|
||||
|
||||
interface DashboardHeroProps {
|
||||
driverName: string;
|
||||
@@ -17,8 +14,15 @@ interface DashboardHeroProps {
|
||||
totalRaces: string | number;
|
||||
actions?: ReactNode;
|
||||
stats?: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* DashboardHero
|
||||
*
|
||||
* Redesigned for "Precision Racing Minimal" theme.
|
||||
* Uses subtle accent glows and crisp separators.
|
||||
*/
|
||||
export function DashboardHero({
|
||||
driverName,
|
||||
avatarUrl,
|
||||
@@ -28,112 +32,111 @@ export function DashboardHero({
|
||||
totalRaces,
|
||||
actions,
|
||||
stats,
|
||||
className = '',
|
||||
}: 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
|
||||
as="section"
|
||||
position="relative"
|
||||
className={`bg-[#0C0D0F] border-b border-[#23272B] overflow-hidden ${className}`}
|
||||
>
|
||||
{/* Subtle Accent Glow */}
|
||||
<Glow
|
||||
position="top-right"
|
||||
color="primary"
|
||||
opacity={0.1}
|
||||
size="xl"
|
||||
/>
|
||||
|
||||
<Box
|
||||
position="relative"
|
||||
maxWidth="80rem"
|
||||
mx="auto"
|
||||
px={6}
|
||||
py={10}
|
||||
py={8}
|
||||
position="relative"
|
||||
zIndex={1}
|
||||
>
|
||||
<Stack gap={8}>
|
||||
<Stack direction="row" align="center" justify="between" wrap gap={8}>
|
||||
{/* Welcome Message */}
|
||||
<Stack direction="row" align="start" gap={5}>
|
||||
<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="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)',
|
||||
}}
|
||||
w="24"
|
||||
h="24"
|
||||
className="border border-[#23272B] p-1 bg-[#141619]"
|
||||
>
|
||||
<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>
|
||||
<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="5"
|
||||
h="5"
|
||||
rounded="full"
|
||||
bg="bg-performance-green"
|
||||
border
|
||||
style={{ borderColor: '#0f1115', borderWidth: '3px' }}
|
||||
w="4"
|
||||
h="4"
|
||||
className="bg-[#4ED4E0] border-2 border-[#0C0D0F]"
|
||||
/>
|
||||
</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}>
|
||||
<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>
|
||||
<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 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>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Quick Actions */}
|
||||
{/* Actions */}
|
||||
{actions && (
|
||||
<Stack direction="row" gap={3} wrap>
|
||||
<Box display="flex" gap={3}>
|
||||
{actions}
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Quick Stats Row */}
|
||||
{/* Stats Grid */}
|
||||
{stats && (
|
||||
<Box
|
||||
display="grid"
|
||||
gridCols={2}
|
||||
responsiveGridCols={{ md: 4 }}
|
||||
<Box
|
||||
display="grid"
|
||||
gridCols={2}
|
||||
responsiveGridCols={{ md: 4 }}
|
||||
gap={4}
|
||||
className="border-t border-[#23272B]/50 pt-6"
|
||||
>
|
||||
{stats}
|
||||
</Box>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user