website refactor
This commit is contained in:
@@ -1,14 +1,17 @@
|
||||
import { RankBadge } from '@/components/leaderboards/RankBadge';
|
||||
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
|
||||
import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Image } from '@/ui/Image';
|
||||
import { Avatar } from '@/ui/Avatar';
|
||||
import { LeaderboardList } from '@/ui/LeaderboardList';
|
||||
import { LeaderboardPreviewShell } from '@/ui/LeaderboardPreviewShell';
|
||||
import { LeaderboardRow } from '@/ui/LeaderboardRow';
|
||||
import { Group } from '@/ui/Group';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Trophy } from 'lucide-react';
|
||||
|
||||
interface DriverLeaderboardPreviewProps {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
drivers: {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -24,16 +27,22 @@ interface DriverLeaderboardPreviewProps {
|
||||
onNavigateToDrivers: () => void;
|
||||
}
|
||||
|
||||
export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToDrivers }: DriverLeaderboardPreviewProps) {
|
||||
export function DriverLeaderboardPreview({
|
||||
title = "Driver Rankings",
|
||||
subtitle = "Top Performers",
|
||||
drivers,
|
||||
onDriverClick,
|
||||
onNavigateToDrivers
|
||||
}: DriverLeaderboardPreviewProps) {
|
||||
const top10 = drivers; // Already sliced in builder
|
||||
|
||||
return (
|
||||
<LeaderboardPreviewShell
|
||||
title="Driver Rankings"
|
||||
subtitle="Top Performers"
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
onViewFull={onNavigateToDrivers}
|
||||
icon={Trophy}
|
||||
iconColor="var(--primary-blue)"
|
||||
iconColor="var(--ui-color-intent-primary)"
|
||||
iconBgGradient="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.1))"
|
||||
viewFullLabel="View All"
|
||||
>
|
||||
@@ -42,71 +51,52 @@ export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToD
|
||||
const position = index + 1;
|
||||
|
||||
return (
|
||||
<Box
|
||||
<LeaderboardRow
|
||||
key={driver.id}
|
||||
as="button"
|
||||
type="button"
|
||||
onClick={() => onDriverClick(driver.id)}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={4}
|
||||
px={5}
|
||||
py={3}
|
||||
w="full"
|
||||
textAlign="left"
|
||||
transition
|
||||
hoverBg="bg-white/[0.02]"
|
||||
group
|
||||
>
|
||||
<Box w="8" display="flex" justifyContent="center">
|
||||
<RankBadge rank={position} />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
position="relative"
|
||||
w="9"
|
||||
h="9"
|
||||
rounded="full"
|
||||
overflow="hidden"
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
groupHoverBorderColor="primary-blue/50"
|
||||
transition
|
||||
>
|
||||
<Image src={driver.avatarUrl} alt={driver.name} fullWidth fullHeight objectFit="cover" />
|
||||
</Box>
|
||||
|
||||
<Box flexGrow={1} minWidth="0">
|
||||
<Text
|
||||
weight="semibold"
|
||||
color="text-white"
|
||||
truncate
|
||||
groupHoverTextColor="text-primary-blue"
|
||||
transition
|
||||
block
|
||||
>
|
||||
{driver.name}
|
||||
</Text>
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Text size="xs" color="text-gray-500">{driver.nationality}</Text>
|
||||
<Box w="1" h="1" rounded="full" bg="bg-gray-700" />
|
||||
<Box as="span" color={SkillLevelDisplay.getColor(driver.skillLevel)}>
|
||||
<Text size="xs" weight="medium">{SkillLevelDisplay.getLabel(driver.skillLevel)}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" alignItems="center" gap={6}>
|
||||
<Box textAlign="right">
|
||||
<Text color="text-primary-blue" font="mono" weight="bold" block size="sm">{RatingDisplay.format(driver.rating)}</Text>
|
||||
<Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Rating</Text>
|
||||
</Box>
|
||||
<Box textAlign="right" minWidth="12">
|
||||
<Text color="text-performance-green" font="mono" weight="bold" block size="sm">{driver.wins}</Text>
|
||||
<Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Wins</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
rank={<RankBadge rank={position} />}
|
||||
identity={
|
||||
<Group gap={4}>
|
||||
<Avatar src={driver.avatarUrl} alt={driver.name} size="sm" />
|
||||
<Group direction="column" align="start" gap={0}>
|
||||
<Text
|
||||
weight="bold"
|
||||
variant="high"
|
||||
truncate
|
||||
block
|
||||
>
|
||||
{driver.name}
|
||||
</Text>
|
||||
<Group gap={2}>
|
||||
<Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider">{driver.nationality}</Text>
|
||||
<Text size="xs" weight="bold" color={SkillLevelDisplay.getColor(driver.skillLevel)} uppercase letterSpacing="wider">
|
||||
{SkillLevelDisplay.getLabel(driver.skillLevel)}
|
||||
</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Group>
|
||||
}
|
||||
stats={
|
||||
<Group gap={8}>
|
||||
<Group direction="column" align="end" gap={0}>
|
||||
<Text variant="primary" font="mono" weight="bold" block size="md" align="right">
|
||||
{RatingDisplay.format(driver.rating)}
|
||||
</Text>
|
||||
<Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px" align="right">
|
||||
Rating
|
||||
</Text>
|
||||
</Group>
|
||||
<Group direction="column" align="end" gap={0}>
|
||||
<Text variant="success" font="mono" weight="bold" block size="md" align="right">
|
||||
{driver.wins}
|
||||
</Text>
|
||||
<Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px" align="right">
|
||||
Wins
|
||||
</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</LeaderboardList>
|
||||
|
||||
Reference in New Issue
Block a user