72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { JoinTeamButton } from '@/components/teams/JoinTeamButton';
|
|
import { TeamLogo } from '@/components/teams/TeamLogo';
|
|
import { TeamTag } from '@/components/teams/TeamTag';
|
|
import { Card } from '@/ui/Card';
|
|
import { Group } from '@/ui/Group';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { StatGrid } from '@/ui/StatGrid';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface TeamHeroProps {
|
|
team: {
|
|
id: string;
|
|
name: string;
|
|
tag: string | null;
|
|
description?: string;
|
|
category?: string | null;
|
|
createdAt?: string;
|
|
leagues: { id: string }[];
|
|
};
|
|
memberCount: number;
|
|
onUpdate: () => void;
|
|
}
|
|
|
|
export function TeamHero({ team, memberCount, onUpdate }: TeamHeroProps) {
|
|
return (
|
|
<Card>
|
|
<Group align="start" justify="between" wrap gap={6}>
|
|
<Group align="start" gap={6} wrap fullWidth>
|
|
<TeamLogo teamId={team.id} alt={team.name} size={96} />
|
|
|
|
<Group direction="col" align="start" gap={2} fullWidth>
|
|
<Group gap={3}>
|
|
<Heading level={1}>{team.name}</Heading>
|
|
{team.tag && <TeamTag tag={team.tag} />}
|
|
</Group>
|
|
|
|
<Text variant="low" block marginBottom={4}>{team.description}</Text>
|
|
|
|
<StatGrid
|
|
columns={{ base: 2, md: 4 }}
|
|
variant="box"
|
|
stats={[
|
|
{
|
|
label: 'Personnel',
|
|
value: `${memberCount} ${memberCount === 1 ? 'member' : 'members'}`,
|
|
},
|
|
...(team.category ? [{
|
|
label: 'Category',
|
|
value: team.category,
|
|
intent: 'primary' as const,
|
|
}] : []),
|
|
...(team.createdAt ? [{
|
|
label: 'Founded',
|
|
value: new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' }),
|
|
}] : []),
|
|
...(team.leagues && team.leagues.length > 0 ? [{
|
|
label: 'Activity',
|
|
value: `${team.leagues.length} ${team.leagues.length === 1 ? 'league' : 'leagues'}`,
|
|
}] : []),
|
|
]}
|
|
/>
|
|
</Group>
|
|
</Group>
|
|
|
|
<JoinTeamButton teamId={team.id} onUpdate={onUpdate} />
|
|
</Group>
|
|
</Card>
|
|
);
|
|
}
|