70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import MembershipStatus from '@/components/leagues/MembershipStatus';
|
|
import FeatureLimitationTooltip from '@/components/alpha/FeatureLimitationTooltip';
|
|
import { getLeagueCoverClasses } from '@/lib/leagueCovers';
|
|
|
|
interface LeagueHeaderProps {
|
|
leagueId: string;
|
|
leagueName: string;
|
|
description?: string | null;
|
|
ownerId: string;
|
|
ownerName: string;
|
|
}
|
|
|
|
export default function LeagueHeader({
|
|
leagueId,
|
|
leagueName,
|
|
description,
|
|
ownerId,
|
|
ownerName,
|
|
}: LeagueHeaderProps) {
|
|
const coverUrl = `https://picsum.photos/seed/${leagueId}/1200/280?blur=2`;
|
|
|
|
return (
|
|
<div className="mb-8">
|
|
<div className="mb-4">
|
|
<div className={getLeagueCoverClasses(leagueId)} aria-hidden="true">
|
|
<div className="relative w-full h-full">
|
|
<Image
|
|
src={coverUrl}
|
|
alt="League cover placeholder"
|
|
fill
|
|
className="object-cover opacity-80"
|
|
sizes="100vw"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center gap-3">
|
|
<h1 className="text-3xl font-bold text-white">{leagueName}</h1>
|
|
<MembershipStatus leagueId={leagueId} />
|
|
</div>
|
|
<FeatureLimitationTooltip message="Multi-league memberships coming in production">
|
|
<span className="px-2 py-1 text-xs font-medium bg-primary-blue/10 text-primary-blue rounded border border-primary-blue/30">
|
|
Alpha: Single League
|
|
</span>
|
|
</FeatureLimitationTooltip>
|
|
</div>
|
|
|
|
{description && (
|
|
<p className="text-gray-400 mb-2">{description}</p>
|
|
)}
|
|
|
|
<div className="text-sm text-gray-400 mb-6">
|
|
<span className="mr-2">Owner:</span>
|
|
<Link
|
|
href={`/drivers/${ownerId}?from=league&leagueId=${leagueId}`}
|
|
className="text-primary-blue hover:underline"
|
|
>
|
|
{ownerName}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |