website refactor

apps/website/ui/LeagueHeader.tsx

@@ -0,0 +1,61 @@
+
+
+import { ReactNode } from 'react';
+import { Box } from './Box';
+import { Heading } from './Heading';
+import { Stack } from './Stack';
+import { Text } from './Text';
+
+interface LeagueHeaderProps {
+  name: string;
+  description?: string | null;
+  logoUrl: string;
+  sponsorContent?: ReactNode;
+  statusContent?: ReactNode;
+}
+
+export function LeagueHeader({
+  name,
+  description,
+  logoUrl,
+  sponsorContent,
+  statusContent,
+}: LeagueHeaderProps) {
+  return (
+    <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">
+            <img
+              src={logoUrl}
+              alt={`${name} logo`}
+              width={64}
+              height={64}
+              className="h-full w-full object-cover"
+              loading="lazy"
+              decoding="async"
+            />
+          </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>
+      </Box>
+    </Box>
+  );
+}