95 lines
2.3 KiB
TypeScript
95 lines
2.3 KiB
TypeScript
import { getMediaUrl } from '@/lib/utilities/media';
|
|
import { Image } from '@/ui/Image';
|
|
import { TableCell, TableRow } from '@/ui/Table';
|
|
import { Text } from '@/ui/Text';
|
|
import { RankMedal } from './RankMedal';
|
|
import React from 'react';
|
|
|
|
interface TeamRankingRowProps {
|
|
id: string;
|
|
rank: number;
|
|
name: string;
|
|
logoUrl?: string;
|
|
rating: number;
|
|
wins: number;
|
|
races: number;
|
|
memberCount: number;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function TeamRankingRow({
|
|
id,
|
|
rank,
|
|
name,
|
|
logoUrl,
|
|
rating,
|
|
wins,
|
|
races,
|
|
memberCount,
|
|
onClick,
|
|
}: TeamRankingRowProps) {
|
|
return (
|
|
<TableRow
|
|
clickable={!!onClick}
|
|
onClick={onClick}
|
|
>
|
|
<TableCell>
|
|
<div style={{ width: '2rem', display: 'flex', justifyContent: 'center' }}>
|
|
<RankMedal rank={rank} size="md" />
|
|
</div>
|
|
</TableCell>
|
|
|
|
<TableCell>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
|
<div style={{
|
|
position: 'relative',
|
|
width: '2.5rem',
|
|
height: '2.5rem',
|
|
borderRadius: '0.5rem',
|
|
overflow: 'hidden',
|
|
border: '1px solid var(--ui-color-border-default)',
|
|
backgroundColor: 'var(--ui-color-bg-surface-muted)'
|
|
}}>
|
|
<Image
|
|
src={logoUrl || getMediaUrl('team-logo', id)}
|
|
alt={name}
|
|
width={40}
|
|
height={40}
|
|
objectFit="cover"
|
|
/>
|
|
</div>
|
|
<div style={{ minWidth: 0 }}>
|
|
<Text
|
|
weight="semibold"
|
|
variant="high"
|
|
block
|
|
truncate
|
|
>
|
|
{name}
|
|
</Text>
|
|
<Text size="xs" variant="low" block>
|
|
{memberCount} Members
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
|
|
<TableCell textAlign="center">
|
|
<Text font="mono" weight="bold" variant="primary">
|
|
{rating}
|
|
</Text>
|
|
</TableCell>
|
|
|
|
<TableCell textAlign="center">
|
|
<Text font="mono" weight="bold" variant="success">
|
|
{wins}
|
|
</Text>
|
|
</TableCell>
|
|
|
|
<TableCell textAlign="center">
|
|
<Text variant="low" font="mono">{races}</Text>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
}
|