117 lines
3.7 KiB
TypeScript
117 lines
3.7 KiB
TypeScript
import { Heading } from '@/ui/Heading';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { ReactNode } from 'react';
|
|
import { TeamLogo } from './TeamLogo';
|
|
import { TeamTag } from './TeamTag';
|
|
|
|
interface TeamHeaderPanelProps {
|
|
teamId: string;
|
|
name: string;
|
|
tag?: string | null;
|
|
description?: string;
|
|
memberCount: number;
|
|
activeLeaguesCount?: number;
|
|
foundedDate?: string;
|
|
category?: string | null;
|
|
actions?: ReactNode;
|
|
}
|
|
|
|
export function TeamHeaderPanel({
|
|
teamId,
|
|
name,
|
|
tag,
|
|
description,
|
|
memberCount,
|
|
activeLeaguesCount,
|
|
foundedDate,
|
|
category,
|
|
actions,
|
|
}: TeamHeaderPanelProps) {
|
|
return (
|
|
<Stack
|
|
bg="surface-charcoal"
|
|
border
|
|
borderColor="border-steel-grey"
|
|
p={6}
|
|
className="relative overflow-hidden"
|
|
>
|
|
{/* Instrument-grade accent corner */}
|
|
<Stack position="absolute" top="-1px" left="-1px" w="4" h="4" borderTop borderLeft borderColor="primary-blue/40" />
|
|
|
|
<Stack direction="row" align="start" justify="between" wrap gap={6}>
|
|
<Stack direction="row" align="start" gap={6} wrap flexGrow={1}>
|
|
{/* Logo Container */}
|
|
<Stack
|
|
w="24"
|
|
h="24"
|
|
bg="base-graphite"
|
|
border
|
|
borderColor="border-steel-grey"
|
|
display="flex"
|
|
center
|
|
overflow="hidden"
|
|
className="relative"
|
|
>
|
|
<TeamLogo teamId={teamId} alt={name} />
|
|
{/* Corner detail */}
|
|
<Stack position="absolute" bottom="0" right="0" w="2" h="2" bg="primary-blue/20" />
|
|
</Stack>
|
|
|
|
<Stack flexGrow={1} minWidth="0">
|
|
<Stack direction="row" align="center" gap={3} mb={2}>
|
|
<Heading level={1} weight="bold" className="tracking-tight">{name}</Heading>
|
|
{tag && <TeamTag tag={tag} />}
|
|
</Stack>
|
|
|
|
{description && (
|
|
<Text color="text-gray-400" block mb={4} maxWidth="42rem" size="sm" leading="relaxed">
|
|
{description}
|
|
</Text>
|
|
)}
|
|
|
|
<Stack direction="row" align="center" gap={4} wrap>
|
|
<Stack display="flex" alignItems="center" gap={1.5}>
|
|
<Stack w="1.5" h="1.5" bg="primary-blue" />
|
|
<Text size="xs" color="text-gray-300" font="mono" className="uppercase tracking-wider">
|
|
{memberCount} {memberCount === 1 ? 'Member' : 'Members'}
|
|
</Text>
|
|
</Stack>
|
|
|
|
{category && (
|
|
<Stack display="flex" alignItems="center" gap={1.5}>
|
|
<Stack w="1.5" h="1.5" bg="telemetry-aqua" />
|
|
<Text size="xs" color="text-gray-300" font="mono" className="uppercase tracking-wider">
|
|
{category}
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
|
|
{activeLeaguesCount !== undefined && (
|
|
<Stack display="flex" alignItems="center" gap={1.5}>
|
|
<Stack w="1.5" h="1.5" bg="warning-amber" />
|
|
<Text size="xs" color="text-gray-300" font="mono" className="uppercase tracking-wider">
|
|
{activeLeaguesCount} {activeLeaguesCount === 1 ? 'League' : 'Leagues'}
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
|
|
{foundedDate && (
|
|
<Text size="xs" color="text-gray-500" font="mono" className="uppercase tracking-wider">
|
|
EST. {foundedDate}
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{actions && (
|
|
<Stack>
|
|
{actions}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|