website refactor

2026-01-14 23:46:04 +01:00
parent c1a86348d7
commit 4a2d7d15a5
294 changed files with 5637 additions and 3418 deletions
--- a/apps/website/components/teams/TeamHero.tsx
+++ b/apps/website/components/teams/TeamHero.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import React from 'react';
+import { ExternalLink } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Image } from '@/ui/Image';
+import { Surface } from '@/ui/Surface';
+import { Icon } from '@/ui/Icon';
+import JoinTeamButton from '@/components/teams/JoinTeamButton';
+import { getMediaUrl } from '@/lib/utilities/media';
+
+interface TeamHeroProps {
+  team: {
+    id: string;
+    name: string;
+    tag: string | null;
+    description?: string;
+    category?: string | null;
+    createdAt?: string;
+    leagues: any[];
+  };
+  memberCount: number;
+  onUpdate: () => void;
+}
+
+export function TeamHero({ team, memberCount, onUpdate }: TeamHeroProps) {
+  return (
+    <Card>
+      <Stack direction="row" align="start" justify="between" wrap gap={6}>
+        <Stack direction="row" align="start" gap={6} wrap style={{ flex: 1 }}>
+          <Surface variant="muted" rounded="lg" padding={1} style={{ width: '6rem', height: '6rem', overflow: 'hidden', backgroundColor: '#262626' }}>
+            <Image
+              src={getMediaUrl('team-logo', team.id)}
+              alt={team.name}
+              width={96}
+              height={96}
+              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            />
+          </Surface>
+          
+          <Box style={{ flex: 1, minWidth: 0 }}>
+            <Stack direction="row" align="center" gap={3} mb={2}>
+              <Heading level={1}>{team.name}</Heading>
+              {team.tag && (
+                <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: '#262626', paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
+                  <Text size="xs" color="text-gray-300">[{team.tag}]</Text>
+                </Surface>
+              )}
+            </Stack>
+
+            <Text color="text-gray-300" block mb={4} style={{ maxWidth: '42rem' }}>{team.description}</Text>
+
+            <Stack direction="row" align="center" gap={4} wrap style={{ fontSize: '0.875rem', color: '#9ca3af' }}>
+              <Text size="sm">{memberCount} {memberCount === 1 ? 'member' : 'members'}</Text>
+              {team.category && (
+                <Stack direction="row" align="center" gap={1.5}>
+                  <Box style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', backgroundColor: '#a855f7' }} />
+                  <Text size="sm" color="text-purple-400">{team.category}</Text>
+                </Stack>
+              )}
+              {team.createdAt && (
+                <Text size="sm">
+                  Founded {new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
+                </Text>
+              )}
+              {team.leagues && team.leagues.length > 0 && (
+                <Text size="sm">
+                  Active in {team.leagues.length} {team.leagues.length === 1 ? 'league' : 'leagues'}
+                </Text>
+              )}
+            </Stack>
+          </Box>
+        </Stack>
+
+        <JoinTeamButton teamId={team.id} onUpdate={onUpdate} />
+      </Stack>
+    </Card>
+  );
+}