website refactor

This commit is contained in:
2026-01-21 01:27:08 +01:00
parent 5f3712e5ab
commit d30a725fe7
44 changed files with 702 additions and 572 deletions

View File

@@ -2,8 +2,10 @@
import { DriverIdentity } from '@/ui/DriverIdentity';
import { ProfileCard } from '@/ui/ProfileCard';
import { StatGrid } from '@/ui/StatGrid';
import { Badge } from '@/ui/Badge';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Flag, Trophy, Medal } from 'lucide-react';
interface DriverCardProps {
@@ -23,12 +25,6 @@ interface DriverCardProps {
}
export function DriverCard({ driver, onClick }: DriverCardProps) {
const stats = [
{ label: 'Races', value: driver.racesCompleted, intent: 'low', icon: Flag },
{ label: 'Wins', value: driver.wins, intent: 'primary', icon: Trophy },
{ label: 'Podiums', value: driver.podiums, intent: 'warning', icon: Medal },
];
return (
<ProfileCard
onClick={() => onClick(driver.id)}
@@ -50,16 +46,20 @@ export function DriverCard({ driver, onClick }: DriverCardProps) {
</Badge>
}
stats={
<StatGrid
stats={stats.map(s => ({
label: s.label,
value: s.value,
intent: s.intent as any,
icon: s.icon
}))}
columns={3}
variant="box"
/>
<Grid cols={3} gap="px" style={{ backgroundColor: 'var(--ui-color-border-muted)', border: '1px solid var(--ui-color-border-muted)', borderRadius: 'var(--ui-radius-md)', overflow: 'hidden' }}>
<Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
<Text size="xs" variant="low" uppercase block mono>Races</Text>
<Text size="sm" weight="bold" mono variant="high">{driver.racesCompleted}</Text>
</Stack>
<Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
<Text size="xs" variant="low" uppercase block mono>Wins</Text>
<Text size="sm" weight="bold" mono variant="primary">{driver.wins}</Text>
</Stack>
<Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
<Text size="xs" variant="low" uppercase block mono>Podiums</Text>
<Text size="sm" weight="bold" mono variant="warning">{driver.podiums}</Text>
</Stack>
</Grid>
}
/>
);