84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { ExternalLink } from 'lucide-react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Image } from '@/ui/Image';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Icon } from '@/ui/Icon';
|
|
import JoinTeamButton from '@/components/teams/JoinTeamButton';
|
|
import { getMediaUrl } from '@/lib/utilities/media';
|
|
|
|
interface TeamHeroProps {
|
|
team: {
|
|
id: string;
|
|
name: string;
|
|
tag: string | null;
|
|
description?: string;
|
|
category?: string | null;
|
|
createdAt?: string;
|
|
leagues: any[];
|
|
};
|
|
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 style={{ flex: 1 }}>
|
|
<Surface variant="muted" rounded="lg" padding={1} style={{ width: '6rem', height: '6rem', overflow: 'hidden', backgroundColor: '#262626' }}>
|
|
<Image
|
|
src={getMediaUrl('team-logo', team.id)}
|
|
alt={team.name}
|
|
width={96}
|
|
height={96}
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
|
/>
|
|
</Surface>
|
|
|
|
<Box style={{ flex: 1, minWidth: 0 }}>
|
|
<Stack direction="row" align="center" gap={3} mb={2}>
|
|
<Heading level={1}>{team.name}</Heading>
|
|
{team.tag && (
|
|
<Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: '#262626', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
|
|
<Text size="xs" color="text-gray-300">[{team.tag}]</Text>
|
|
</Surface>
|
|
)}
|
|
</Stack>
|
|
|
|
<Text color="text-gray-300" block mb={4} style={{ maxWidth: '42rem' }}>{team.description}</Text>
|
|
|
|
<Stack direction="row" align="center" gap={4} wrap style={{ fontSize: '0.875rem', color: '#9ca3af' }}>
|
|
<Text size="sm">{memberCount} {memberCount === 1 ? 'member' : 'members'}</Text>
|
|
{team.category && (
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Box style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', backgroundColor: '#a855f7' }} />
|
|
<Text size="sm" color="text-purple-400">{team.category}</Text>
|
|
</Stack>
|
|
)}
|
|
{team.createdAt && (
|
|
<Text size="sm">
|
|
Founded {new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
|
|
</Text>
|
|
)}
|
|
{team.leagues && team.leagues.length > 0 && (
|
|
<Text size="sm">
|
|
Active in {team.leagues.length} {team.leagues.length === 1 ? 'league' : 'leagues'}
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<JoinTeamButton teamId={team.id} onUpdate={onUpdate} />
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|