60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { MembershipStatus } from './MembershipStatus';
|
|
import { getMediaUrl } from '@/lib/utilities/media';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
import { LeagueHeader as UiLeagueHeader } from '@/ui/LeagueHeader';
|
|
|
|
// Main sponsor info for "by XYZ" display
|
|
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) {
|
|
const logoUrl = getMediaUrl('league-logo', leagueId);
|
|
|
|
return (
|
|
<UiLeagueHeader
|
|
name={leagueName}
|
|
description={description}
|
|
logoUrl={logoUrl}
|
|
statusContent={<MembershipStatus leagueId={leagueId} />}
|
|
sponsorContent={
|
|
mainSponsor ? (
|
|
mainSponsor.websiteUrl ? (
|
|
<Box
|
|
as="a"
|
|
href={mainSponsor.websiteUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
color="text-primary-blue"
|
|
hoverTextColor="text-primary-blue/80"
|
|
transition
|
|
>
|
|
{mainSponsor.name}
|
|
</Box>
|
|
) : (
|
|
<Text color="text-primary-blue">{mainSponsor.name}</Text>
|
|
)
|
|
) : undefined
|
|
}
|
|
/>
|
|
);
|
|
}
|