website refactor
This commit is contained in:
@@ -1,13 +1,13 @@
|
||||
|
||||
'use client';
|
||||
|
||||
import { Badge } from '@/ui/Badge';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Link } from '@/ui/Link';
|
||||
import { Stack } from '@/ui/primitives/Stack';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { PositionBadge } from '@/ui/ResultRow';
|
||||
import { AlertTriangle, ExternalLink } from 'lucide-react';
|
||||
import { ReactNode } from 'react';
|
||||
import React, { ReactNode } from 'react';
|
||||
|
||||
type PenaltyTypeDTO =
|
||||
| 'time_penalty'
|
||||
@@ -97,10 +97,10 @@ export function RaceResultsTable({
|
||||
return pointsSystem[position] || 0;
|
||||
};
|
||||
|
||||
const getPositionChangeColor = (change: number): string => {
|
||||
if (change > 0) return 'text-performance-green';
|
||||
if (change < 0) return 'text-warning-amber';
|
||||
return 'text-gray-500';
|
||||
const getPositionChangeVariant = (change: number): 'success' | 'warning' | 'low' => {
|
||||
if (change > 0) return 'success';
|
||||
if (change < 0) return 'warning';
|
||||
return 'low';
|
||||
};
|
||||
|
||||
const getPositionChangeText = (change: number): string => {
|
||||
@@ -111,14 +111,14 @@ export function RaceResultsTable({
|
||||
|
||||
if (results.length === 0) {
|
||||
return (
|
||||
<Stack textAlign="center" py={8} gap={0}>
|
||||
<Text color="text-gray-400">No results available</Text>
|
||||
</Stack>
|
||||
<div style={{ textAlign: 'center', padding: '2rem 0' }}>
|
||||
<Text variant="low">No results available</Text>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack overflow="auto" gap={0}>
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
@@ -129,7 +129,7 @@ export function RaceResultsTable({
|
||||
<TableHeader>Points</TableHeader>
|
||||
<TableHeader>+/-</TableHeader>
|
||||
<TableHeader>Penalties</TableHeader>
|
||||
{isAdmin && <TableHeader className="text-right">Actions</TableHeader>}
|
||||
{isAdmin && <TableHeader textAlign="right">Actions</TableHeader>}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
@@ -147,117 +147,85 @@ export function RaceResultsTable({
|
||||
variant={isCurrentUser ? 'highlight' : 'default'}
|
||||
>
|
||||
<TableCell>
|
||||
<Stack
|
||||
direction="row"
|
||||
align="center"
|
||||
justify="center"
|
||||
w="8"
|
||||
h="8"
|
||||
rounded="lg"
|
||||
bg={
|
||||
result.position === 1
|
||||
? 'bg-yellow-500/20'
|
||||
: result.position === 2
|
||||
? 'bg-gray-400/20'
|
||||
: result.position === 3
|
||||
? 'bg-amber-600/20'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<Text
|
||||
weight="bold"
|
||||
size="sm"
|
||||
color={
|
||||
result.position === 1
|
||||
? 'text-yellow-400'
|
||||
: result.position === 2
|
||||
? 'text-gray-300'
|
||||
: result.position === 3
|
||||
? 'text-amber-500'
|
||||
: 'text-white'
|
||||
}
|
||||
>
|
||||
{result.position}
|
||||
</Text>
|
||||
</Stack>
|
||||
<PositionBadge position={result.position} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Stack direction="row" align="center" gap={3}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
||||
{driver ? (
|
||||
<>
|
||||
<Stack
|
||||
w="8"
|
||||
h="8"
|
||||
rounded="full"
|
||||
align="center"
|
||||
justify="center"
|
||||
flexShrink={0}
|
||||
bg={isCurrentUser ? 'bg-primary-blue/30' : 'bg-iron-gray'}
|
||||
ring={isCurrentUser ? 'ring-2 ring-primary-blue/50' : undefined}
|
||||
>
|
||||
<React.Fragment>
|
||||
<div style={{
|
||||
width: '2rem',
|
||||
height: '2rem',
|
||||
borderRadius: '9999px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
backgroundColor: isCurrentUser ? 'rgba(25, 140, 255, 0.2)' : 'var(--ui-color-bg-surface-muted)',
|
||||
border: isCurrentUser ? '2px solid var(--ui-color-intent-primary)' : '1px solid var(--ui-color-border-default)'
|
||||
}}>
|
||||
<Text
|
||||
size="sm"
|
||||
weight="bold"
|
||||
color={isCurrentUser ? 'text-primary-blue' : 'text-gray-400'}
|
||||
variant={isCurrentUser ? 'primary' : 'low'}
|
||||
>
|
||||
{driver.name.charAt(0)}
|
||||
</Text>
|
||||
</Stack>
|
||||
</div>
|
||||
<Link
|
||||
href={`/drivers/${driver.id}`}
|
||||
variant="ghost"
|
||||
className={`group ${isCurrentUser ? 'text-primary-blue font-semibold' : 'text-white'}`}
|
||||
variant={isCurrentUser ? 'primary' : 'inherit'}
|
||||
>
|
||||
<Text className="group-hover:underline">{driver.name}</Text>
|
||||
{isCurrentUser && (
|
||||
<Badge size="xs" variant="primary" bg="bg-primary-blue" color="text-white" rounded="full" style={{ marginLeft: '6px' }}>
|
||||
You
|
||||
</Badge>
|
||||
)}
|
||||
<Icon icon={ExternalLink} size={3} className="ml-1.5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
|
||||
<Text weight={isCurrentUser ? 'semibold' : 'normal'}>{driver.name}</Text>
|
||||
{isCurrentUser && (
|
||||
<Badge variant="primary" size="sm">You</Badge>
|
||||
)}
|
||||
<Icon icon={ExternalLink} size={3} intent="low" />
|
||||
</div>
|
||||
</Link>
|
||||
</>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<Text color="text-white">{getDriverName(result.driverId)}</Text>
|
||||
<Text variant="high">{getDriverName(result.driverId)}</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text color={isFastestLap ? 'text-performance-green' : 'text-white'} weight={isFastestLap ? 'medium' : 'normal'}>
|
||||
<Text variant={isFastestLap ? 'success' : 'high'} weight={isFastestLap ? 'medium' : 'normal'}>
|
||||
{formatLapTime(result.fastestLap)}
|
||||
</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text color={result.incidents > 0 ? 'text-warning-amber' : 'text-white'}>
|
||||
<Text variant={result.incidents > 0 ? 'warning' : 'high'}>
|
||||
{result.incidents}×
|
||||
</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text color="text-white" weight="medium">
|
||||
<Text variant="high" weight="medium">
|
||||
{getPoints(result.position)}
|
||||
</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text weight="medium" className={getPositionChangeColor(positionChange)}>
|
||||
<Text weight="medium" variant={getPositionChangeVariant(positionChange)}>
|
||||
{getPositionChangeText(positionChange)}
|
||||
</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{driverPenalties.length > 0 ? (
|
||||
<Stack gap={1}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
|
||||
{driverPenalties.map((penalty, idx) => (
|
||||
<Stack key={idx} direction="row" align="center" gap={1.5}>
|
||||
<Icon icon={AlertTriangle} size={3} color="var(--critical-red)" />
|
||||
<Text size="xs" color="text-red-400">{getPenaltyDescription(penalty)}</Text>
|
||||
</Stack>
|
||||
<div key={idx} style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
|
||||
<Icon icon={AlertTriangle} size={3} intent="critical" />
|
||||
<Text size="xs" variant="critical">{getPenaltyDescription(penalty)}</Text>
|
||||
</div>
|
||||
))}
|
||||
</Stack>
|
||||
</div>
|
||||
) : (
|
||||
<Text color="text-gray-500">—</Text>
|
||||
<Text variant="low">—</Text>
|
||||
)}
|
||||
</TableCell>
|
||||
{isAdmin && (
|
||||
<TableCell className="text-right">
|
||||
<TableCell style={{ textAlign: 'right' }}>
|
||||
{driver && penaltyButtonRenderer && penaltyButtonRenderer(driver)}
|
||||
</TableCell>
|
||||
)}
|
||||
@@ -266,6 +234,6 @@ export function RaceResultsTable({
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user