mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-14 23:46:04 +01:00
parent c1a86348d7
commit 4a2d7d15a5
294 changed files with 5637 additions and 3418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
apps/website/components/dashboard/DashboardHero.tsx Normal file
View File

@@ -0,0 +1,101 @@
'use client';
import React from 'react';
import { Trophy, Medal, Target, Users, Flag, User } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Image } from '@/ui/Image';
import { Button } from '@/ui/Button';
import { Link } from '@/ui/Link';
import { Surface } from '@/ui/Surface';
import { StatBox } from './StatBox';
import { routes } from '@/lib/routing/RouteConfig';
interface DashboardHeroProps {
currentDriver: {
name: string;
avatarUrl: string;
country: string;
rating: string | number;
rank: string | number;
totalRaces: string | number;
wins: string | number;
podiums: string | number;
consistency: string;
};
activeLeaguesCount: string | number;
}
export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHeroProps) {
return (
<Box as="section" style={{ position: 'relative', overflow: 'hidden' }}>
{/* Background Pattern */}
<Box style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.1), #0f1115, rgba(147, 51, 234, 0.05))' }} />
<Box style={{ position: 'relative', maxWidth: '80rem', margin: '0 auto', padding: '2.5rem 1.5rem' }}>
<Stack gap={8}>
<Stack direction="row" align="center" justify="between" wrap gap={8}>
{/* Welcome Message */}
<Stack direction="row" align="start" gap={5}>
<Box style={{ position: 'relative' }}>
<Box style={{ width: '5rem', height: '5rem', borderRadius: '1rem', background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)', padding: '0.125rem', boxShadow: '0 20px 25px -5px rgba(59, 130, 246, 0.2)' }}>
<Box style={{ width: '100%', height: '100%', borderRadius: '0.75rem', overflow: 'hidden', backgroundColor: '#262626' }}>
<Image
src={currentDriver.avatarUrl}
alt={currentDriver.name}
width={80}
height={80}
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>
</Box>
</Box>
<Box style={{ position: 'absolute', bottom: '-0.25rem', right: '-0.25rem', width: '1.25rem', height: '1.25rem', borderRadius: '9999px', backgroundColor: '#10b981', border: '3px solid #0f1115' }} />
</Box>
<Box>
<Text size="sm" color="text-gray-400" block mb={1}>Good morning,</Text>
<Heading level={1} style={{ marginBottom: '0.5rem' }}>
{currentDriver.name}
<Text size="2xl" style={{ marginLeft: '0.75rem' }}>{currentDriver.country}</Text>
</Heading>
<Stack direction="row" align="center" gap={3} wrap>
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)', border: '1px solid rgba(59, 130, 246, 0.3)', paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
<Text size="sm" weight="semibold" color="text-primary-blue">{currentDriver.rating}</Text>
</Surface>
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(250, 204, 21, 0.1)', border: '1px solid rgba(250, 204, 21, 0.3)', paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
<Text size="sm" weight="semibold" style={{ color: '#facc15' }}>#{currentDriver.rank}</Text>
</Surface>
<Text size="xs" color="text-gray-500">{currentDriver.totalRaces} races completed</Text>
</Stack>
</Box>
</Stack>
{/* Quick Actions */}
<Stack direction="row" gap={3} wrap>
<Link href={routes.public.leagues} variant="ghost">
<Button variant="secondary" icon={<Flag style={{ width: '1rem', height: '1rem' }} />}>
Browse Leagues
</Button>
</Link>
<Link href={routes.protected.profile} variant="ghost">
<Button variant="primary" icon={<User style={{ width: '1rem', height: '1rem' }} />}>
View Profile
</Button>
</Link>
</Stack>
</Stack>
{/* Quick Stats Row */}
<Box style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '1rem' }}>
{/* At md this should be 4 columns */}
<StatBox icon={Trophy} label="Wins" value={currentDriver.wins} color="#10b981" />
<StatBox icon={Medal} label="Podiums" value={currentDriver.podiums} color="#f59e0b" />
<StatBox icon={Target} label="Consistency" value={currentDriver.consistency} color="#3b82f6" />
<StatBox icon={Users} label="Active Leagues" value={activeLeaguesCount} color="#a855f7" />
</Box>
</Stack>
</Box>
</Box>
);
}