website refactor

apps/website/ui/TeamHero.tsx

@@ -1,79 +0,0 @@
-
-
-import { JoinTeamButton } from '@/components/teams/JoinTeamButton';
-import { Box } from '@/ui/Box';
-import { Card } from '@/ui/Card';
-import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/Stack';
-import { TeamLogo } from '@/ui/TeamLogo';
-import { TeamTag } from '@/ui/TeamTag';
-import { Text } from '@/ui/Text';
-
-interface TeamHeroProps {
-  team: {
-    id: string;
-    name: string;
-    tag: string | null;
-    description?: string;
-    category?: string | null;
-    createdAt?: string;
-    leagues: { id: string }[];
-  };
-  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 flexGrow={1}>
-          <Box 
-            w="24" 
-            h="24" 
-            rounded="lg" 
-            p={1} 
-            overflow="hidden" 
-            bg="bg-deep-graphite"
-            display="flex"
-            alignItems="center"
-            justifyContent="center"
-          >
-            <TeamLogo teamId={team.id} alt={team.name} />
-          </Box>
-          
-          <Box flexGrow={1} minWidth="0">
-            <Stack direction="row" align="center" gap={3} mb={2}>
-              <Heading level={1}>{team.name}</Heading>
-              {team.tag && <TeamTag tag={team.tag} />}
-            </Stack>
-
-            <Text color="text-gray-300" block mb={4} maxWidth="42rem">{team.description}</Text>
-
-            <Stack direction="row" align="center" gap={4} wrap>
-              <Text size="sm" color="text-gray-400">{memberCount} {memberCount === 1 ? 'member' : 'members'}</Text>
-              {team.category && (
-                <Stack direction="row" align="center" gap={1.5}>
-                  <Box w="2" h="2" rounded="full" bg="bg-purple-500" />
-                  <Text size="sm" color="text-purple-400">{team.category}</Text>
-                </Stack>
-              )}
-              {team.createdAt && (
-                <Text size="sm" color="text-gray-400">
-                  Founded {new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
-                </Text>
-              )}
-              {team.leagues && team.leagues.length > 0 && (
-                <Text size="sm" color="text-gray-400">
-                  Active in {team.leagues.length} {team.leagues.length === 1 ? 'league' : 'leagues'}
-                </Text>
-              )}
-            </Stack>
-          </Box>
-        </Stack>
-
-        <JoinTeamButton teamId={team.id} onUpdate={onUpdate} />
-      </Stack>
-    </Card>
-  );
-}