80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
|
|
|
|
import { JoinTeamButton } from '@/components/teams/JoinTeamButton';
|
|
import { Box } from '@/ui/Box';
|
|
import { Card } from '@/ui/Card';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { TeamLogo } from '@/ui/TeamLogo';
|
|
import { TeamTag } from '@/ui/TeamTag';
|
|
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>
|
|
<Stack direction="row" align="start" justify="between" wrap gap={6}>
|
|
<Stack direction="row" align="start" gap={6} wrap flexGrow={1}>
|
|
<Box
|
|
w="24"
|
|
h="24"
|
|
rounded="lg"
|
|
p={1}
|
|
overflow="hidden"
|
|
bg="bg-deep-graphite"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<TeamLogo teamId={team.id} alt={team.name} />
|
|
</Box>
|
|
|
|
<Box flexGrow={1} minWidth="0">
|
|
<Stack direction="row" align="center" gap={3} mb={2}>
|
|
<Heading level={1}>{team.name}</Heading>
|
|
{team.tag && <TeamTag tag={team.tag} />}
|
|
</Stack>
|
|
|
|
<Text color="text-gray-300" block mb={4} maxWidth="42rem">{team.description}</Text>
|
|
|
|
<Stack direction="row" align="center" gap={4} wrap>
|
|
<Text size="sm" color="text-gray-400">{memberCount} {memberCount === 1 ? 'member' : 'members'}</Text>
|
|
{team.category && (
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Box w="2" h="2" rounded="full" bg="bg-purple-500" />
|
|
<Text size="sm" color="text-purple-400">{team.category}</Text>
|
|
</Stack>
|
|
)}
|
|
{team.createdAt && (
|
|
<Text size="sm" color="text-gray-400">
|
|
Founded {new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
|
|
</Text>
|
|
)}
|
|
{team.leagues && team.leagues.length > 0 && (
|
|
<Text size="sm" color="text-gray-400">
|
|
Active in {team.leagues.length} {team.leagues.length === 1 ? 'league' : 'leagues'}
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<JoinTeamButton teamId={team.id} onUpdate={onUpdate} />
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|