website refactor
This commit is contained in:
@@ -1,12 +1,9 @@
|
||||
import { getMediaUrl } from '@/lib/utilities/media';
|
||||
import { Image } from '@/ui/Image';
|
||||
import { TableCell, TableRow } from '@/ui/Table';
|
||||
import { Avatar } from '@/ui/Avatar';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Group } from '@/ui/Group';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import { RankMedal } from './RankMedal';
|
||||
import { RankBadge } from './RankBadge';
|
||||
import { LeaderboardRow } from '@/ui/LeaderboardRow';
|
||||
import React from 'react';
|
||||
|
||||
interface TeamRankingRowProps {
|
||||
@@ -33,66 +30,59 @@ export function TeamRankingRow({
|
||||
onClick,
|
||||
}: TeamRankingRowProps) {
|
||||
return (
|
||||
<TableRow
|
||||
clickable={!!onClick}
|
||||
<LeaderboardRow
|
||||
onClick={onClick}
|
||||
>
|
||||
<TableCell>
|
||||
<Box width="2rem" display="flex" justifyContent="center">
|
||||
<RankMedal rank={rank} size="md" />
|
||||
</Box>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<Group gap={3}>
|
||||
<Surface
|
||||
position="relative"
|
||||
width="2.5rem"
|
||||
height="2.5rem"
|
||||
rounded="md"
|
||||
overflow="hidden"
|
||||
border
|
||||
variant="muted"
|
||||
>
|
||||
<Image
|
||||
src={logoUrl || getMediaUrl('team-logo', id)}
|
||||
alt={name}
|
||||
width={40}
|
||||
height={40}
|
||||
objectFit="cover"
|
||||
/>
|
||||
</Surface>
|
||||
<Stack gap={0} flex={1} minWidth="0">
|
||||
rank={<RankBadge rank={rank} />}
|
||||
identity={
|
||||
<Group gap={4}>
|
||||
<Avatar
|
||||
src={logoUrl || getMediaUrl('team-logo', id)}
|
||||
alt={name}
|
||||
size="md"
|
||||
/>
|
||||
<Group direction="column" align="start" gap={0}>
|
||||
<Text
|
||||
weight="semibold"
|
||||
weight="bold"
|
||||
variant="high"
|
||||
block
|
||||
truncate
|
||||
>
|
||||
{name}
|
||||
</Text>
|
||||
<Text size="xs" variant="low" block>
|
||||
<Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider">
|
||||
{memberCount} Members
|
||||
</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Group>
|
||||
</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>
|
||||
}
|
||||
stats={
|
||||
<Group gap={8}>
|
||||
<Group direction="column" align="end" gap={0}>
|
||||
<Text variant="low" font="mono" weight="bold" block size="md">
|
||||
{races}
|
||||
</Text>
|
||||
<Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px">
|
||||
Races
|
||||
</Text>
|
||||
</Group>
|
||||
<Group direction="column" align="end" gap={0}>
|
||||
<Text variant="primary" font="mono" weight="bold" block size="md">
|
||||
{rating}
|
||||
</Text>
|
||||
<Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px">
|
||||
Rating
|
||||
</Text>
|
||||
</Group>
|
||||
<Group direction="column" align="end" gap={0}>
|
||||
<Text variant="success" font="mono" weight="bold" block size="md">
|
||||
{wins}
|
||||
</Text>
|
||||
<Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold" fontSize="9px">
|
||||
Wins
|
||||
</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user