website refactor
This commit is contained in:
@@ -1,7 +1,12 @@
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import { Users, Crown, Shield, ChevronRight } from 'lucide-react';
|
||||
import Button from '@/ui/Button';
|
||||
import { Users, Crown, ChevronRight } from 'lucide-react';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Image } from '@/ui/Image';
|
||||
import { getMediaUrl } from '@/lib/utilities/media';
|
||||
import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
|
||||
import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
|
||||
@@ -25,85 +30,131 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
|
||||
const top5 = teams; // Already sliced in builder when implemented
|
||||
|
||||
return (
|
||||
<div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-charcoal-outline bg-iron-gray/20">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 border border-purple-500/20">
|
||||
<Users className="w-5 h-5 text-purple-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white">Team Rankings</h3>
|
||||
<p className="text-xs text-gray-500">Top performing racing teams</p>
|
||||
</div>
|
||||
</div>
|
||||
<Box rounded="xl" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" overflow="hidden">
|
||||
<Box display="flex" alignItems="center" justifyContent="between" px={5} py={4} borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
|
||||
<Box display="flex" alignItems="center" gap={3}>
|
||||
<Box display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="xl" bg="bg-gradient-to-br from-purple-500/20 to-purple-500/5" border borderColor="border-purple-500/20">
|
||||
<Icon icon={Users} size={5} color="text-purple-400" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading level={3} fontSize="lg" weight="semibold" color="text-white">Team Rankings</Heading>
|
||||
<Text size="xs" color="text-gray-500" block>Top performing racing teams</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={onNavigateToTeams}
|
||||
className="flex items-center gap-2 text-sm"
|
||||
size="sm"
|
||||
>
|
||||
View All
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Text size="sm">View All</Text>
|
||||
<Icon icon={ChevronRight} size={4} />
|
||||
</Stack>
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<div className="divide-y divide-charcoal-outline/50">
|
||||
{top5.map((team, index) => {
|
||||
<Stack gap={0}
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className="divide-y divide-charcoal-outline/50"
|
||||
>
|
||||
{top5.map((team) => {
|
||||
const position = team.position;
|
||||
|
||||
return (
|
||||
<button
|
||||
<Box
|
||||
key={team.id}
|
||||
as="button"
|
||||
type="button"
|
||||
onClick={() => onTeamClick(team.id)}
|
||||
className="flex items-center gap-4 px-5 py-3 w-full text-left hover:bg-iron-gray/30 transition-colors group"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={4}
|
||||
px={5}
|
||||
py={3}
|
||||
w="full"
|
||||
textAlign="left"
|
||||
transition
|
||||
hoverBg="bg-iron-gray/30"
|
||||
group
|
||||
>
|
||||
<div className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold border ${MedalDisplay.getBg(position)} ${MedalDisplay.getColor(position)}`}>
|
||||
{position <= 3 ? <Crown className="w-3.5 h-3.5" /> : position}
|
||||
</div>
|
||||
<Box
|
||||
display="flex"
|
||||
h="8"
|
||||
w="8"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
rounded="full"
|
||||
border
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className={`text-xs font-bold ${MedalDisplay.getBg(position)} ${MedalDisplay.getColor(position)}`}
|
||||
>
|
||||
{position <= 3 ? <Icon icon={Crown} size={3.5} /> : <Text weight="bold">{position}</Text>}
|
||||
</Box>
|
||||
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-charcoal-outline border border-charcoal-outline overflow-hidden">
|
||||
<Box display="flex" h="9" w="9" alignItems="center" justifyContent="center" rounded="lg" bg="bg-charcoal-outline" border borderColor="border-charcoal-outline" overflow="hidden">
|
||||
<Image
|
||||
src={team.logoUrl || getMediaUrl('team-logo', team.id)}
|
||||
alt={team.name}
|
||||
width={36}
|
||||
height={36}
|
||||
className="w-full h-full object-cover"
|
||||
fullWidth
|
||||
fullHeight
|
||||
objectFit="cover"
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-white font-medium truncate group-hover:text-purple-400 transition-colors">
|
||||
<Box flexGrow={1} minWidth="0">
|
||||
<Text weight="medium" color="text-white" truncate groupHoverTextColor="text-purple-400" transition block>
|
||||
{team.name}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500 flex-wrap">
|
||||
</Text>
|
||||
<Box display="flex" alignItems="center" gap={2} flexWrap="wrap">
|
||||
{team.category && (
|
||||
<span className="flex items-center gap-1 text-purple-400">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-purple-400"></span>
|
||||
{team.category}
|
||||
</span>
|
||||
<Box display="flex" alignItems="center" gap={1} color="text-purple-400">
|
||||
<Box w="1.5" h="1.5" rounded="full" bg="bg-purple-400" />
|
||||
<Text size="xs">{team.category}</Text>
|
||||
</Box>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<Users className="w-3 h-3" />
|
||||
{team.memberCount} members
|
||||
</span>
|
||||
<span className={SkillLevelDisplay.getColor(team.category || '')}>{SkillLevelDisplay.getLabel(team.category || '')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
<Icon icon={Users} size={3} color="text-gray-500" />
|
||||
<Text size="xs" color="text-gray-500">{team.memberCount} members</Text>
|
||||
</Box>
|
||||
<Box as="span"
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
className={SkillLevelDisplay.getColor(team.category || '')}
|
||||
>
|
||||
<Text size="xs">{SkillLevelDisplay.getLabel(team.category || '')}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<div className="text-center">
|
||||
<p className="text-purple-400 font-mono font-semibold">{team.memberCount}</p>
|
||||
<p className="text-[10px] text-gray-500">Members</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-performance-green font-mono font-semibold">{team.totalWins}</p>
|
||||
<p className="text-[10px] text-gray-500">Wins</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<Box display="flex" alignItems="center" gap={4}>
|
||||
<Box textAlign="center">
|
||||
<Text color="text-purple-400" font="mono" weight="semibold" block>{team.memberCount}</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-gray-500"
|
||||
block
|
||||
>
|
||||
Members
|
||||
</Text>
|
||||
</Box>
|
||||
<Box textAlign="center">
|
||||
<Text color="text-performance-green" font="mono" weight="semibold" block>{team.totalWins}</Text>
|
||||
<Text
|
||||
// eslint-disable-next-line gridpilot-rules/component-classification
|
||||
style={{ fontSize: '10px' }}
|
||||
color="text-gray-500"
|
||||
block
|
||||
>
|
||||
Wins
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user