website refactor

apps/website/components/leagues/LeagueHeader.tsx

@@ -1,89 +1,62 @@
-'use client';
 
-import React from 'react';
+
+import { ReactNode } from 'react';
 import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Image } from '@/ui/Image';
-import { MembershipStatus } from './MembershipStatus';
 
-interface MainSponsorInfo {
+interface LeagueHeaderProps {
   name: string;
-  logoUrl?: string;
-  websiteUrl?: string;
-}
-
-export interface LeagueHeaderProps {
-  leagueId: string;
-  leagueName: string;
   description?: string | null;
-  ownerId: string;
-  ownerName: string;
-  mainSponsor?: MainSponsorInfo | null;
+  logoUrl: string;
+  sponsorContent?: ReactNode;
+  statusContent?: ReactNode;
 }
 
 export function LeagueHeader({
-  leagueId,
-  leagueName,
+  name,
   description,
-  mainSponsor,
+  logoUrl,
+  sponsorContent,
+  statusContent,
 }: LeagueHeaderProps) {
   return (
-    <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>
-          )}
+    <Box mb={8}>
+      <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
+        <Stack direction="row" align="center" gap={4}>
+          <Box h="16" w="16" rounded="xl" overflow="hidden" border style={{ borderColor: 'rgba(38, 38, 38, 0.8)', backgroundColor: '#1a1d23' }} shadow="lg">
+            <Image
+              src={logoUrl}
+              alt={`${name} logo`}
+              width={64}
+              height={64}
+              fullWidth
+              fullHeight
+              objectFit="cover"
+            />
+          </Box>
+          <Box>
+            <Box display="flex" alignItems="center" gap={3} mb={1}>
+              <Heading level={1}>
+                {name}
+                {sponsorContent && (
+                  <Text color="text-gray-400" weight="normal" size="lg" ml={2}>
+                    by {sponsorContent}
+                  </Text>
+                )}
+              </Heading>
+              {statusContent}
+            </Box>
+            {description && (
+              <Text color="text-gray-400" size="sm" maxWidth="xl" block>
+                {description}
+              </Text>
+            )}
+          </Box>
         </Stack>
-      </Stack>
+      </Box>
     </Box>
   );
 }