wip

apps/website/components/leagues/LeagueHeader.tsx

@@ -15,12 +15,20 @@ import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
 import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
 import DriverSummaryPill from '@/components/profile/DriverSummaryPill';
 
-interface LeagueHeaderProps {
+// 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({
@@ -29,6 +37,7 @@ export default function LeagueHeader({
   description,
   ownerId,
   ownerName,
+  mainSponsor,
 }: LeagueHeaderProps) {
   const imageService = getImageService();
   const logoUrl = imageService.getLeagueLogo(leagueId);
@@ -112,7 +121,26 @@ export default function LeagueHeader({
           </div>
           <div>
             <div className="flex items-center gap-3 mb-1">
-              <h1 className="text-2xl font-bold text-white">{leagueName}</h1>
+              <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 && (