website refactor

apps/website/components/leagues/LeagueHeader.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
-import { MembershipStatus } from './MembershipStatus';
-import { getMediaUrl } from '@/lib/utilities/media';
-import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
-import { LeagueHeader as UiLeagueHeader } from '@/ui/LeagueHeader';
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Image } from '@/ui/Image';
+import { MembershipStatus } from './MembershipStatus';
 
-// Main sponsor info for "by XYZ" display
 interface MainSponsorInfo {
   name: string;
   logoUrl?: string;
@@ -27,33 +29,61 @@ export function LeagueHeader({
   description,
   mainSponsor,
 }: LeagueHeaderProps) {
-  const logoUrl = getMediaUrl('league-logo', leagueId);
-
   return (
-    <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
-      }
-    />
+    <Box as="header" mb={8}>
+      <Stack direction="row" align="center" gap={6}>
+        <Box 
+          position="relative" 
+          w="20" 
+          h="20" 
+          overflow="hidden" 
+          border 
+          borderColor="white/10" 
+          bg="zinc-900" 
+          shadow="2xl"
+        >
+          <Image
+            src={`/api/media/league-logo/${leagueId}`}
+            alt={`${leagueName} logo`}
+            fullWidth
+            fullHeight
+            objectFit="cover"
+          />
+        </Box>
+        <Stack gap={1}>
+          <Stack direction="row" align="center" gap={4}>
+            <Heading level={1} fontSize="3xl" weight="bold" color="text-white">
+              {leagueName}
+              {mainSponsor && (
+                <Text ml={3} size="lg" weight="normal" color="text-zinc-500">
+                  by{' '}
+                  {mainSponsor.websiteUrl ? (
+                    <Box
+                      as="a"
+                      href={mainSponsor.websiteUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      color="text-blue-500"
+                      hoverTextColor="text-blue-400"
+                      transition
+                    >
+                      {mainSponsor.name}
+                    </Box>
+                  ) : (
+                    <Text color="text-blue-500">{mainSponsor.name}</Text>
+                  )}
+                </Text>
+              )}
+            </Heading>
+            <MembershipStatus leagueId={leagueId} />
+          </Stack>
+          {description && (
+            <Text color="text-zinc-400" size="sm" maxWidth="2xl" block leading="relaxed">
+              {description}
+            </Text>
+          )}
+        </Stack>
+      </Stack>
+    </Box>
   );
 }