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

35
apps/website/components/races/RaceResultRow.tsx
View File

@@ -1,9 +1,8 @@
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
import { Box } from '@/ui/Box';
import { Image } from '@/ui/Image';
import { Stack } from '@/ui/Stack';
import { Image } from '@/ui/Image';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
@@ -50,7 +49,7 @@ export function RaceResultRow({ result, points }: RaceResultRowProps) {
>
<Stack direction="row" align="center" gap={3}>
{/* Position */}
<Box
<Stack
width="10"
height="10"
rounded="lg"
@@ -59,26 +58,26 @@ export function RaceResultRow({ result, points }: RaceResultRowProps) {
className={`${posConfig.bg} ${posConfig.color}`}
>
<Text weight="bold">{position}</Text>
</Box>
</Stack>
{/* Avatar */}
<Box position="relative" flexShrink={0}>
<Box width="10" height="10" rounded="full" overflow="hidden" border={isCurrentUser} borderColor="border-primary-blue/50" className={isCurrentUser ? 'border-2' : ''}>
<Stack position="relative" flexShrink={0}>
<Stack width="10" height="10" rounded="full" overflow="hidden" border={isCurrentUser} borderColor="border-primary-blue/50" className={isCurrentUser ? 'border-2' : ''}>
<Image src={driverAvatar} alt={driverName} width={40} height={40} fullWidth fullHeight objectFit="cover" />
</Box>
<Box position="absolute" bottom="-0.5" right="-0.5" width="5" height="5" rounded="full" bg="bg-deep-graphite" display="flex" center style={{ fontSize: '0.625rem' }}>
</Stack>
<Stack position="absolute" bottom="-0.5" right="-0.5" width="5" height="5" rounded="full" bg="bg-deep-graphite" display="flex" center style={{ fontSize: '0.625rem' }}>
{CountryFlagDisplay.fromCountryCode(country).toString()}
</Box>
</Box>
</Stack>
</Stack>
{/* Driver Info */}
<Box flexGrow={1} minWidth="0">
<Stack flexGrow={1} minWidth="0">
<Stack direction="row" align="center" gap={2}>
<Text weight="semibold" size="sm" color={isCurrentUser ? 'text-primary-blue' : 'text-white'} truncate>{driverName}</Text>
{isCurrentUser && (
<Box px={2} py={0.5} rounded="full" bg="bg-primary-blue">
<Stack px={2} py={0.5} rounded="full" bg="bg-primary-blue">
<Text size="xs" weight="bold" color="text-white">YOU</Text>
</Box>
</Stack>
)}
</Stack>
<Stack direction="row" align="center" gap={2} mt={1}>
@@ -88,19 +87,19 @@ export function RaceResultRow({ result, points }: RaceResultRowProps) {
<Text size="xs" color="text-gray-500">•</Text>
<Text size="xs" color="text-gray-500">Incidents: {incidents}</Text>
</Stack>
</Box>
</Stack>
{/* Times */}
<Box textAlign="right" style={{ minWidth: '100px' }}>
<Stack textAlign="right" style={{ minWidth: '100px' }}>
<Text size="sm" font="mono" color="text-white" block>{time}</Text>
<Text size="xs" color="text-performance-green" block mt={1}>FL: {fastestLap}</Text>
</Box>
</Stack>
{/* Points */}
<Box p={2} rounded="lg" border={true} borderColor="border-warning-amber/20" bg="bg-warning-amber/10" textAlign="center" style={{ minWidth: '3.5rem' }}>
<Stack p={2} rounded="lg" border={true} borderColor="border-warning-amber/20" bg="bg-warning-amber/10" textAlign="center" style={{ minWidth: '3.5rem' }}>
<Text size="xs" color="text-gray-500" block>PTS</Text>
<Text size="sm" weight="bold" color="text-warning-amber">{points}</Text>
</Box>
</Stack>
</Stack>
</Surface>
);