website refactor
This commit is contained in:
@@ -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>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user