website refactor

apps/website/components/teams/TeamHeaderPanel.tsx

@@ -0,0 +1,117 @@
+import React, { ReactNode } from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { TeamLogo } from './TeamLogo';
+import { TeamTag } from './TeamTag';
+
+interface TeamHeaderPanelProps {
+  teamId: string;
+  name: string;
+  tag?: string | null;
+  description?: string;
+  memberCount: number;
+  activeLeaguesCount?: number;
+  foundedDate?: string;
+  category?: string | null;
+  actions?: ReactNode;
+}
+
+export function TeamHeaderPanel({
+  teamId,
+  name,
+  tag,
+  description,
+  memberCount,
+  activeLeaguesCount,
+  foundedDate,
+  category,
+  actions,
+}: TeamHeaderPanelProps) {
+  return (
+    <Box 
+      bg="surface-charcoal" 
+      border 
+      borderColor="border-steel-grey" 
+      p={6} 
+      className="relative overflow-hidden"
+    >
+      {/* Instrument-grade accent corner */}
+      <Box position="absolute" top="-1px" left="-1px" w="4" h="4" borderTop borderLeft borderColor="primary-blue/40" />
+      
+      <Stack direction="row" align="start" justify="between" wrap gap={6}>
+        <Stack direction="row" align="start" gap={6} wrap flexGrow={1}>
+          {/* Logo Container */}
+          <Box 
+            w="24" 
+            h="24" 
+            bg="base-graphite" 
+            border 
+            borderColor="border-steel-grey" 
+            display="flex" 
+            center 
+            overflow="hidden"
+            className="relative"
+          >
+            <TeamLogo teamId={teamId} alt={name} />
+            {/* Corner detail */}
+            <Box position="absolute" bottom="0" right="0" w="2" h="2" bg="primary-blue/20" />
+          </Box>
+          
+          <Box flexGrow={1} minWidth="0">
+            <Stack direction="row" align="center" gap={3} mb={2}>
+              <Heading level={1} weight="bold" className="tracking-tight">{name}</Heading>
+              {tag && <TeamTag tag={tag} />}
+            </Stack>
+
+            {description && (
+              <Text color="text-gray-400" block mb={4} maxWidth="42rem" size="sm" leading="relaxed">
+                {description}
+              </Text>
+            )}
+
+            <Stack direction="row" align="center" gap={4} wrap>
+              <Box display="flex" alignItems="center" gap={1.5}>
+                <Box w="1.5" h="1.5" bg="primary-blue" />
+                <Text size="xs" color="text-gray-300" font="mono" className="uppercase tracking-wider">
+                  {memberCount} {memberCount === 1 ? 'Member' : 'Members'}
+                </Text>
+              </Box>
+              
+              {category && (
+                <Box display="flex" alignItems="center" gap={1.5}>
+                  <Box w="1.5" h="1.5" bg="telemetry-aqua" />
+                  <Text size="xs" color="text-gray-300" font="mono" className="uppercase tracking-wider">
+                    {category}
+                  </Text>
+                </Box>
+              )}
+
+              {activeLeaguesCount !== undefined && (
+                <Box display="flex" alignItems="center" gap={1.5}>
+                  <Box w="1.5" h="1.5" bg="warning-amber" />
+                  <Text size="xs" color="text-gray-300" font="mono" className="uppercase tracking-wider">
+                    {activeLeaguesCount} {activeLeaguesCount === 1 ? 'League' : 'Leagues'}
+                  </Text>
+                </Box>
+              )}
+
+              {foundedDate && (
+                <Text size="xs" color="text-gray-500" font="mono" className="uppercase tracking-wider">
+                  EST. {foundedDate}
+                </Text>
+              )}
+            </Stack>
+          </Box>
+        </Stack>
+
+        {actions && (
+          <Box>
+            {actions}
+          </Box>
+        )}
+      </Stack>
+    </Box>
+  );
+}