website refactor

apps/website/components/teams/TeamDetailsHeader.tsx

@@ -0,0 +1,114 @@
+'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 { Button } from '@/ui/Button';
+import { Image } from '@/ui/Image';
+
+interface TeamDetailsHeaderProps {
+  teamId: string;
+  name: string;
+  tag?: string;
+  description?: string;
+  logoUrl?: string;
+  memberCount: number;
+  foundedDate?: string;
+  isAdmin?: boolean;
+  onAdminClick?: () => void;
+}
+
+export function TeamDetailsHeader({
+  name,
+  tag,
+  description,
+  logoUrl,
+  memberCount,
+  foundedDate,
+  isAdmin,
+  onAdminClick,
+}: TeamDetailsHeaderProps) {
+  return (
+    <Box 
+      bg="surface-charcoal" 
+      border 
+      borderColor="outline-steel" 
+      p={8} 
+      position="relative"
+      overflow="hidden"
+    >
+      {/* Background accent */}
+      <Box 
+        position="absolute" 
+        top="0" 
+        right="0" 
+        w="64" 
+        h="64" 
+        bg="primary-accent/5" 
+        rounded="full" 
+        blur="3xl" 
+        translate="-1/2, -1/2"
+      />
+
+      <Stack direction="row" align="start" gap={8} position="relative">
+        <Box 
+          w="32" 
+          h="32" 
+          bg="base-black" 
+          border 
+          borderColor="outline-steel" 
+          display="flex" 
+          center
+          overflow="hidden"
+        >
+          {logoUrl ? (
+            <Image src={logoUrl} alt={name} width={128} height={128} />
+          ) : (
+            <Text size="2xl" weight="bold" color="text-gray-700">{name.substring(0, 2).toUpperCase()}</Text>
+          )}
+        </Box>
+
+        <Box flex="1">
+          <Stack direction="row" align="center" gap={3}>
+            <Heading level={1} weight="bold">{name}</Heading>
+            {tag && (
+              <Box px={2} py={1} bg="base-black" border borderColor="outline-steel">
+                <Text size="xs" font="mono" color="primary-accent" weight="bold">[{tag}]</Text>
+              </Box>
+            )}
+          </Stack>
+
+          <Text color="text-gray-400" mt={2} block maxWidth="2xl">
+            {description || 'No mission statement provided.'}
+          </Text>
+
+          <Stack direction="row" gap={6} mt={6}>
+            <Box>
+              <Text size="xs" color="text-gray-500" uppercase font="mono" letterSpacing="widest">Personnel</Text>
+              <Text block weight="bold" color="text-white">{memberCount} Units</Text>
+            </Box>
+            <Box>
+              <Text size="xs" color="text-gray-500" uppercase font="mono" letterSpacing="widest">Established</Text>
+              <Text block weight="bold" color="text-white">
+                {foundedDate ? new Date(foundedDate).toLocaleDateString() : 'Unknown'}
+              </Text>
+            </Box>
+          </Stack>
+        </Box>
+
+        <Stack gap={3}>
+          {isAdmin && (
+            <Button variant="secondary" size="sm" onClick={onAdminClick}>
+              Configure
+            </Button>
+          )}
+          <Button variant="primary" size="sm">
+            Join Request
+          </Button>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}