wip

apps/website/components/leagues/LeagueHeader.tsx

@@ -0,0 +1,70 @@
+'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>
+  );
+}