116 lines
4.1 KiB
TypeScript
116 lines
4.1 KiB
TypeScript
import { ChevronRight, Globe, Users, Zap } from 'lucide-react';
|
|
import { ReactNode } from 'react';
|
|
import { Card } from './Card';
|
|
import { Heading } from './Heading';
|
|
import { Icon } from './Icon';
|
|
import { Text } from './Text';
|
|
import { Badge } from './Badge';
|
|
|
|
export interface TeamCardProps {
|
|
name: string;
|
|
leagueName?: string;
|
|
logo?: ReactNode;
|
|
memberCount: number;
|
|
rating?: string;
|
|
wins?: string;
|
|
races?: string;
|
|
region?: string;
|
|
isRecruiting?: boolean;
|
|
performanceLevel?: string;
|
|
onClick?: () => void;
|
|
description?: string;
|
|
}
|
|
|
|
export const TeamCard = ({
|
|
name,
|
|
leagueName,
|
|
logo,
|
|
memberCount,
|
|
rating,
|
|
wins,
|
|
races,
|
|
region = 'EU',
|
|
isRecruiting,
|
|
performanceLevel,
|
|
description,
|
|
onClick
|
|
}: TeamCardProps) => {
|
|
return (
|
|
<Card
|
|
variant="precision"
|
|
padding="none"
|
|
onClick={onClick}
|
|
transition
|
|
>
|
|
<div className="p-6 space-y-6">
|
|
{/* Header: Logo and Identity */}
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 bg-[var(--ui-color-bg-base)] flex items-center justify-center overflow-hidden border border-[var(--ui-color-border-muted)]">
|
|
{logo || <Icon icon={Users} size={5} intent="low" />}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<Heading level={4} weight="bold" truncate uppercase>{name}</Heading>
|
|
{isRecruiting && (
|
|
<Badge variant="success" size="xs">RECRUITING</Badge>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{leagueName && <Text size="xs" variant="low" truncate uppercase mono>{leagueName}</Text>}
|
|
{performanceLevel && (
|
|
<div className="flex items-center gap-1">
|
|
<Icon icon={Zap} size={3} intent="telemetry" />
|
|
<Text size="xs" variant="telemetry" mono uppercase>{performanceLevel}</Text>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Technical Stats Grid - Engineered Look */}
|
|
{(rating || wins || races) && (
|
|
<div className="grid grid-cols-3 gap-px bg-[var(--ui-color-border-muted)] border border-[var(--ui-color-border-muted)]">
|
|
<div className="p-3 bg-[var(--ui-color-bg-surface)] text-center">
|
|
<Text size="xs" variant="low" uppercase block mb={1} mono>Rating</Text>
|
|
<Text size="md" weight="bold" mono variant="primary">{rating || '-'}</Text>
|
|
</div>
|
|
<div className="p-3 bg-[var(--ui-color-bg-surface)] text-center">
|
|
<Text size="xs" variant="low" uppercase block mb={1} mono>Wins</Text>
|
|
<Text size="md" weight="bold" mono variant="telemetry">{wins || '-'}</Text>
|
|
</div>
|
|
<div className="p-3 bg-[var(--ui-color-bg-surface)] text-center">
|
|
<Text size="xs" variant="low" uppercase block mb={1} mono>Races</Text>
|
|
<Text size="md" weight="bold" mono variant="high">{races || '-'}</Text>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{description && (
|
|
<Text size="xs" variant="low" lineClamp={2} block leading="relaxed">
|
|
{description}
|
|
</Text>
|
|
)}
|
|
|
|
{/* Footer: Metadata */}
|
|
<div className="flex items-center justify-between pt-4 border-t border-[var(--ui-color-border-muted)]">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-1.5">
|
|
<Icon icon={Users} size={3} intent="low" />
|
|
<Text size="xs" variant="low" mono>{memberCount}</Text>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<Icon icon={Globe} size={3} intent="low" />
|
|
<Text size="xs" variant="low" mono>{region}</Text>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1 text-[var(--ui-color-intent-primary)]">
|
|
<Text size="xs" weight="bold" uppercase mono>Details</Text>
|
|
<Icon icon={ChevronRight} size={3} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|