90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Image } from '@/ui/Image';
|
|
import { MembershipStatus } from './MembershipStatus';
|
|
|
|
interface MainSponsorInfo {
|
|
name: string;
|
|
logoUrl?: string;
|
|
websiteUrl?: string;
|
|
}
|
|
|
|
export interface LeagueHeaderProps {
|
|
leagueId: string;
|
|
leagueName: string;
|
|
description?: string | null;
|
|
ownerId: string;
|
|
ownerName: string;
|
|
mainSponsor?: MainSponsorInfo | null;
|
|
}
|
|
|
|
export function LeagueHeader({
|
|
leagueId,
|
|
leagueName,
|
|
description,
|
|
mainSponsor,
|
|
}: LeagueHeaderProps) {
|
|
return (
|
|
<Box as="header" mb={8}>
|
|
<Stack direction="row" align="center" gap={6}>
|
|
<Box
|
|
position="relative"
|
|
w="20"
|
|
h="20"
|
|
overflow="hidden"
|
|
border
|
|
borderColor="white/10"
|
|
bg="zinc-900"
|
|
shadow="2xl"
|
|
>
|
|
<Image
|
|
src={`/api/media/league-logo/${leagueId}`}
|
|
alt={`${leagueName} logo`}
|
|
fullWidth
|
|
fullHeight
|
|
objectFit="cover"
|
|
/>
|
|
</Box>
|
|
<Stack gap={1}>
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Heading level={1} fontSize="3xl" weight="bold" color="text-white">
|
|
{leagueName}
|
|
{mainSponsor && (
|
|
<Text ml={3} size="lg" weight="normal" color="text-zinc-500">
|
|
by{' '}
|
|
{mainSponsor.websiteUrl ? (
|
|
<Box
|
|
as="a"
|
|
href={mainSponsor.websiteUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
color="text-blue-500"
|
|
hoverTextColor="text-blue-400"
|
|
transition
|
|
>
|
|
{mainSponsor.name}
|
|
</Box>
|
|
) : (
|
|
<Text color="text-blue-500">{mainSponsor.name}</Text>
|
|
)}
|
|
</Text>
|
|
)}
|
|
</Heading>
|
|
<MembershipStatus leagueId={leagueId} />
|
|
</Stack>
|
|
{description && (
|
|
<Text color="text-zinc-400" size="sm" maxWidth="2xl" block leading="relaxed">
|
|
{description}
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|