127 lines
3.4 KiB
TypeScript
127 lines
3.4 KiB
TypeScript
|
|
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Image } from '@/ui/Image';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Crown, Trophy, Users } from 'lucide-react';
|
|
|
|
interface TeamLeaderboardItemProps {
|
|
position: number;
|
|
name: string;
|
|
logoUrl: string;
|
|
category?: string;
|
|
memberCountLabel: string;
|
|
totalWinsLabel: string;
|
|
isRecruiting: boolean;
|
|
ratingLabel: string;
|
|
onClick?: () => void;
|
|
medalColor: string;
|
|
medalBg: string;
|
|
medalBorder: string;
|
|
}
|
|
|
|
export function TeamLeaderboardItem({
|
|
position,
|
|
name,
|
|
logoUrl,
|
|
category,
|
|
memberCountLabel,
|
|
totalWinsLabel,
|
|
isRecruiting,
|
|
ratingLabel,
|
|
onClick,
|
|
medalColor,
|
|
medalBg,
|
|
medalBorder,
|
|
}: TeamLeaderboardItemProps) {
|
|
return (
|
|
<Stack
|
|
as="button"
|
|
type="button"
|
|
onClick={onClick}
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={4}
|
|
px={4}
|
|
py={3}
|
|
fullWidth
|
|
textAlign="left"
|
|
bg="transparent"
|
|
border="none"
|
|
cursor="pointer"
|
|
borderBottom
|
|
style={{ borderColor: 'rgba(38, 38, 38, 0.5)' }}
|
|
className="last:border-0"
|
|
>
|
|
{/* Position */}
|
|
<Stack
|
|
w="8"
|
|
h="8"
|
|
display="flex"
|
|
center
|
|
rounded="full"
|
|
style={{
|
|
fontSize: '0.75rem',
|
|
fontWeight: 'bold',
|
|
border: `1px solid ${medalBorder}`,
|
|
backgroundColor: medalBg,
|
|
color: medalColor
|
|
}}
|
|
>
|
|
{position <= 3 ? (
|
|
<Icon icon={Crown} size={3.5} />
|
|
) : (
|
|
position
|
|
)}
|
|
</Stack>
|
|
|
|
{/* Team Info */}
|
|
<Stack w="9" h="9" rounded="md" overflow="hidden" bg="bg-deep-graphite" border style={{ borderColor: 'rgba(38, 38, 38, 0.8)' }} flexShrink={0}>
|
|
<Image
|
|
src={logoUrl}
|
|
alt={name}
|
|
width={36}
|
|
height={36}
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
|
/>
|
|
</Stack>
|
|
<Stack style={{ flex: 1, minWidth: 0 }}>
|
|
<Text weight="medium" color="text-white" className="truncate" block>
|
|
{name}
|
|
</Text>
|
|
<Stack direction="row" align="center" gap={2} wrap mt={0.5}>
|
|
{category && (
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Stack w="1.5" h="1.5" rounded="full" bg="bg-purple-500" />
|
|
<Text size="xs" color="text-purple-400">{category}</Text>
|
|
</Stack>
|
|
)}
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Icon icon={Users} size={3} color="var(--text-gray-600)" />
|
|
<Text size="xs" color="text-gray-500">{memberCountLabel}</Text>
|
|
</Stack>
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Icon icon={Trophy} size={3} color="var(--text-gray-600)" />
|
|
<Text size="xs" color="text-gray-500">{totalWinsLabel}</Text>
|
|
</Stack>
|
|
{isRecruiting && (
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Stack w="1.5" h="1.5" rounded="full" bg="bg-performance-green" />
|
|
<Text size="xs" color="text-performance-green">Recruiting</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* Rating */}
|
|
<Stack textAlign="right">
|
|
<Text font="mono" weight="semibold" color="text-purple-400" block>
|
|
{ratingLabel}
|
|
</Text>
|
|
<Text size="xs" color="text-gray-500">Rating</Text>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|