132 lines
4.3 KiB
TypeScript
132 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { ChevronRight, Users, Zap } from 'lucide-react';
|
|
import { ProfileCard } from '@/ui/ProfileCard';
|
|
import { CountryFlag } from '@/ui/CountryFlag';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Logo } from '@/ui/Logo';
|
|
import { Text } from '@/ui/Text';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { TeamSummaryData } from '@/lib/view-data/TeamsViewData';
|
|
|
|
interface TeamCardProps {
|
|
team?: TeamSummaryData;
|
|
// Compatibility props
|
|
name?: string;
|
|
logo?: string;
|
|
memberCount?: number;
|
|
ratingLabel?: string;
|
|
winsLabel?: string;
|
|
racesLabel?: string;
|
|
region?: string;
|
|
isRecruiting?: boolean;
|
|
performanceLevel?: string;
|
|
description?: string;
|
|
onClick?: (id: string) => void;
|
|
}
|
|
|
|
export function TeamCard({
|
|
team,
|
|
name,
|
|
logo,
|
|
memberCount,
|
|
ratingLabel,
|
|
winsLabel,
|
|
racesLabel,
|
|
region,
|
|
isRecruiting,
|
|
performanceLevel,
|
|
description,
|
|
onClick
|
|
}: TeamCardProps) {
|
|
const data = team || {
|
|
teamId: '',
|
|
teamName: name || '',
|
|
memberCount: memberCount || 0,
|
|
logoUrl: logo,
|
|
ratingLabel: ratingLabel || '-',
|
|
winsLabel: winsLabel || '-',
|
|
racesLabel: racesLabel || '-',
|
|
region: region,
|
|
isRecruiting: isRecruiting || false,
|
|
performanceLevel: performanceLevel,
|
|
description: description,
|
|
countryCode: region,
|
|
};
|
|
|
|
return (
|
|
<ProfileCard
|
|
variant="precision"
|
|
onClick={() => onClick?.(data.teamId)}
|
|
identity={
|
|
<Stack direction="row" align="start" gap={4}>
|
|
<Logo
|
|
src={data.logoUrl}
|
|
alt={data.teamName}
|
|
size={40}
|
|
rounded="sm"
|
|
variant="dark"
|
|
icon={Users}
|
|
/>
|
|
<Stack flex={1} gap={1} paddingTop={1}>
|
|
<Heading level={5} weight="bold" uppercase style={{ lineHeight: '1.2' }}>
|
|
{data.teamName}
|
|
</Heading>
|
|
{data.performanceLevel && (
|
|
<Stack direction="row" align="center" gap={1}>
|
|
<Icon icon={Zap} size={3} intent="telemetry" />
|
|
<Text size="xs" variant="telemetry" mono uppercase>{data.performanceLevel}</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
}
|
|
actions={
|
|
data.isRecruiting ? (
|
|
<Badge variant="success" size="xs">
|
|
RECRUITING
|
|
</Badge>
|
|
) : undefined
|
|
}
|
|
stats={
|
|
<Stack gap={4}>
|
|
<Grid cols={3} gap="px" style={{ backgroundColor: 'var(--ui-color-border-muted)', border: '1px solid var(--ui-color-border-muted)', borderRadius: 'var(--ui-radius-md)', overflow: 'hidden' }}>
|
|
<Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
|
|
<Text size="xs" variant="low" uppercase block mono>Rating</Text>
|
|
<Text size="sm" weight="bold" mono variant="primary">{data.ratingLabel}</Text>
|
|
</Stack>
|
|
<Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
|
|
<Text size="xs" variant="low" uppercase block mono>Wins</Text>
|
|
<Text size="sm" weight="bold" mono variant="telemetry">{data.winsLabel}</Text>
|
|
</Stack>
|
|
<Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
|
|
<Text size="xs" variant="low" uppercase block mono>Races</Text>
|
|
<Text size="sm" weight="bold" mono variant="high">{data.racesLabel}</Text>
|
|
</Stack>
|
|
</Grid>
|
|
|
|
<Stack direction="row" justify="between" align="center">
|
|
<Stack direction="row" gap={4}>
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Icon icon={Users} size={3} intent="low" />
|
|
<Text size="xs" variant="low" mono>{data.memberCount}</Text>
|
|
</Stack>
|
|
{data.countryCode && (
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<CountryFlag countryCode={data.countryCode} size="sm" />
|
|
<Text size="xs" variant="low" mono uppercase>{data.countryCode}</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
<Icon icon={ChevronRight} size={3} intent="primary" />
|
|
</Stack>
|
|
</Stack>
|
|
}
|
|
/>
|
|
);
|
|
}
|