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-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
apps/website/components/drivers/ProfileStats.tsx
View File

@@ -3,10 +3,9 @@
import { useDriverProfile } from "@/hooks/driver/useDriverProfile";
import { useMemo } from 'react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { StatCard } from '@/ui/StatCard';
import { RankBadge } from '@/components/leaderboards/RankBadge';
@@ -86,18 +85,18 @@ export function ProfileStats({ driverId, stats }: ProfileStatsProps) {
<Heading level={2} mb={6}>Rankings Dashboard</Heading>
<Stack gap={4}>
<Box p={4} rounded="lg" bg="bg-deep-graphite" border borderColor="border-charcoal-outline">
<Box display="flex" alignItems="center" justifyContent="between" mb={3}>
<Box display="flex" alignItems="center" gap={3}>
<Stack p={4} rounded="lg" bg="bg-deep-graphite" border borderColor="border-charcoal-outline">
<Stack display="flex" alignItems="center" justifyContent="between" mb={3}>
<Stack display="flex" alignItems="center" gap={3}>
<RankBadge rank={driverStats.overallRank ?? 0} size="lg" />
<Box>
<Stack>
<Text color="text-white" weight="medium" size="lg" block>Overall Ranking</Text>
<Text size="sm" color="text-gray-400" block>
{driverStats.overallRank ?? 0} of {totalDrivers} drivers
</Text>
</Box>
</Box>
<Box textAlign="right">
</Stack>
</Stack>
<Stack textAlign="right">
<Text
size="sm"
weight="medium"
@@ -107,36 +106,36 @@ export function ProfileStats({ driverId, stats }: ProfileStatsProps) {
{getPercentileLabel(driverStats.percentile ?? 0)}
</Text>
<Text size="xs" color="text-gray-500" block>Global Percentile</Text>
</Box>
</Box>
</Stack>
</Stack>
<Box display="grid" gridCols={3} gap={4} pt={3} borderTop borderColor="border-charcoal-outline">
<Box textAlign="center">
<Stack display="grid" gridCols={3} gap={4} pt={3} borderTop borderColor="border-charcoal-outline">
<Stack textAlign="center">
<Text size="2xl" weight="bold" color="text-primary-blue" block>
{driverStats.rating ?? 0}
</Text>
<Text size="xs" color="text-gray-400" block>Rating</Text>
</Box>
<Box textAlign="center">
</Stack>
<Stack textAlign="center">
<Text size="lg" weight="bold" color="text-green-400" block>
{getTrendIndicator(5)} {winRate}%
</Text>
<Text size="xs" color="text-gray-400" block>Win Rate</Text>
</Box>
<Box textAlign="center">
</Stack>
<Stack textAlign="center">
<Text size="lg" weight="bold" color="text-warning-amber" block>
{getTrendIndicator(2)} {podiumRate}%
</Text>
<Text size="xs" color="text-gray-400" block>Podium Rate</Text>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
</Stack>
</Card>
)}
{defaultStats ? (
<Box display="grid" responsiveGridCols={{ base: 2, md: 4 }} gap={4}>
<Stack display="grid" responsiveGridCols={{ base: 2, md: 4 }} gap={4}>
<StatCard label="Total Races" value={defaultStats.totalRaces} variant="blue" />
<StatCard label="Wins" value={defaultStats.wins} variant="green" />
<StatCard label="Podiums" value={defaultStats.podiums} variant="orange" />
@@ -145,7 +144,7 @@ export function ProfileStats({ driverId, stats }: ProfileStatsProps) {
<StatCard label="Completion" value={`${defaultStats.completionRate.toFixed(1)}%`} variant="green" />
<StatCard label="Win Rate" value={`${winRate}%`} variant="blue" />
<StatCard label="Podium Rate" value={`${podiumRate}%`} variant="orange" />
</Box>
</Stack>
) : (
<Card>
<Heading level={3} mb={2}>Career Statistics</Heading>
@@ -156,10 +155,10 @@ export function ProfileStats({ driverId, stats }: ProfileStatsProps) {
)}
<Card bg="bg-charcoal-200/50" borderColor="border-primary-blue/30">
<Box display="flex" alignItems="center" gap={3} mb={3}>
<Stack display="flex" alignItems="center" gap={3} mb={3}>
<Text size="2xl">📊</Text>
<Heading level={3}>Performance by Car Class</Heading>
</Box>
</Stack>
<Text color="text-gray-400" size="sm" block>
Detailed per-car and per-class performance breakdowns will be available in a future
version once more race history data is tracked.
@@ -167,10 +166,10 @@ export function ProfileStats({ driverId, stats }: ProfileStatsProps) {
</Card>
<Card bg="bg-charcoal-200/50" borderColor="border-primary-blue/30">
<Box display="flex" alignItems="center" gap={3} mb={3}>
<Stack display="flex" alignItems="center" gap={3} mb={3}>
<Text size="2xl">📈</Text>
<Heading level={3}>Coming Soon</Heading>
</Box>
</Stack>
<Text color="text-gray-400" size="sm" block>
Performance trends, track-specific stats, head-to-head comparisons vs friends, and
league member comparisons will be available in production.