82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import MembershipStatus from '@/components/leagues/MembershipStatus';
|
|
import { getMediaUrl } from '@/lib/utilities/media';
|
|
import Image from 'next/image';
|
|
|
|
|
|
// 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 default function LeagueHeader({
|
|
leagueId,
|
|
leagueName,
|
|
description,
|
|
ownerId,
|
|
mainSponsor,
|
|
}: LeagueHeaderProps) {
|
|
const logoUrl = getMediaUrl('league-logo', leagueId);
|
|
|
|
return (
|
|
<div className="mb-8">
|
|
{/* League header with logo - no cover image */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="h-16 w-16 rounded-xl overflow-hidden border-2 border-charcoal-outline bg-iron-gray shadow-lg">
|
|
<img
|
|
src={logoUrl}
|
|
alt={`${leagueName} logo`}
|
|
width={64}
|
|
height={64}
|
|
className="h-full w-full object-cover"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-1">
|
|
<h1 className="text-2xl font-bold text-white">
|
|
{leagueName}
|
|
{mainSponsor && (
|
|
<span className="text-gray-400 font-normal text-lg ml-2">
|
|
by{' '}
|
|
{mainSponsor.websiteUrl ? (
|
|
<a
|
|
href={mainSponsor.websiteUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-primary-blue hover:text-primary-blue/80 transition-colors"
|
|
>
|
|
{mainSponsor.name}
|
|
</a>
|
|
) : (
|
|
<span className="text-primary-blue">{mainSponsor.name}</span>
|
|
)}
|
|
</span>
|
|
)}
|
|
</h1>
|
|
<MembershipStatus leagueId={leagueId} />
|
|
</div>
|
|
{description && (
|
|
<p className="text-gray-400 text-sm max-w-xl">{description}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|