62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
|
|
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Image } from '@/ui/Image';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { ReactNode } from 'react';
|
|
|
|
interface LeagueHeaderProps {
|
|
name: string;
|
|
description?: string | null;
|
|
logoUrl: string;
|
|
sponsorContent?: ReactNode;
|
|
statusContent?: ReactNode;
|
|
}
|
|
|
|
export function LeagueHeader({
|
|
name,
|
|
description,
|
|
logoUrl,
|
|
sponsorContent,
|
|
statusContent,
|
|
}: LeagueHeaderProps) {
|
|
return (
|
|
<Stack mb={8}>
|
|
<Stack display="flex" alignItems="center" justifyContent="between" mb={6}>
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Stack h="16" w="16" rounded="xl" overflow="hidden" border style={{ borderColor: 'rgba(38, 38, 38, 0.8)', backgroundColor: '#1a1d23' }} shadow="lg">
|
|
<Image
|
|
src={logoUrl}
|
|
alt={`${name} logo`}
|
|
width={64}
|
|
height={64}
|
|
fullWidth
|
|
fullHeight
|
|
objectFit="cover"
|
|
/>
|
|
</Stack>
|
|
<Stack>
|
|
<Stack display="flex" alignItems="center" gap={3} mb={1}>
|
|
<Heading level={1}>
|
|
{name}
|
|
{sponsorContent && (
|
|
<Text color="text-gray-400" weight="normal" size="lg" ml={2}>
|
|
by {sponsorContent}
|
|
</Text>
|
|
)}
|
|
</Heading>
|
|
{statusContent}
|
|
</Stack>
|
|
{description && (
|
|
<Text color="text-gray-400" size="sm" maxWidth="xl" block>
|
|
{description}
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|