website refactor

apps/website/components/leagues/LeagueHeader.tsx

@@ -1,9 +1,9 @@
-'use client';
-
-import MembershipStatus from '@/components/leagues/MembershipStatus';
+import React from 'react';
+import { MembershipStatus } from './MembershipStatus';
 import { getMediaUrl } from '@/lib/utilities/media';
-import Image from 'next/image';
-
+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 {
@@ -21,61 +21,39 @@ export interface LeagueHeaderProps {
   mainSponsor?: MainSponsorInfo | null;
 }
 
-export default function LeagueHeader({
+export 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>
+    <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
+      }
+    />
   );
 }