website refactor

apps/website/components/teams/TeamStandings.tsx

@@ -1,14 +1,13 @@
 'use client';
 
 import { Card } from '@/ui/Card';
-import { useTeamStandings } from "@/lib/hooks/team";
-import { Stack } from '@/ui/Stack';
+import { useTeamStandings } from "@/hooks/team/useTeamStandings";
 import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
-import { Badge } from '@/ui/Badge';
-import { Grid } from '@/ui/Grid';
-import { Surface } from '@/ui/Surface';
+import { StandingsList } from '@/ui/StandingsList';
+import { LoadingWrapper } from '@/ui/LoadingWrapper';
+import { EmptyState } from '@/ui/EmptyState';
+import { Trophy } from 'lucide-react';
 
 interface TeamStandingsProps {
   teamId: string;
@@ -21,9 +20,7 @@ export function TeamStandings({ teamId, leagues }: TeamStandingsProps) {
   if (loading) {
     return (
       <Card>
-        <Box textAlign="center" py={8}>
-          <Text color="text-gray-400">Loading standings...</Text>
-        </Box>
+        <LoadingWrapper message="Loading standings..." />
       </Card>
     );
   }
@@ -36,54 +33,14 @@ export function TeamStandings({ teamId, leagues }: TeamStandingsProps) {
         </Heading>
       </Box>
       
-      <Stack gap={4}>
-        {standings.map((standing: any) => (
-          <Surface
-            key={standing.leagueId}
-            variant="dark"
-            rounded="lg"
-            border
-            padding={4}
-          >
-            <Stack direction="row" align="center" justify="between" mb={3}>
-              <Heading level={4}>
-                {standing.leagueName}
-              </Heading>
-              <Badge variant="primary">
-                P{standing.position}
-              </Badge>
-            </Stack>
-            
-            <Grid cols={3} gap={4}>
-              <Box textAlign="center">
-                <Text size="2xl" weight="bold" color="text-white" block>
-                  {standing.points}
-                </Text>
-                <Text size="xs" color="text-gray-400">Points</Text>
-              </Box>
-              <Box textAlign="center">
-                <Text size="2xl" weight="bold" color="text-white" block>
-                  {standing.wins}
-                </Text>
-                <Text size="xs" color="text-gray-400">Wins</Text>
-              </Box>
-              <Box textAlign="center">
-                <Text size="2xl" weight="bold" color="text-white" block>
-                  {standing.racesCompleted}
-                </Text>
-                <Text size="xs" color="text-gray-400">Races</Text>
-              </Box>
-            </Grid>
-          </Surface>
-        ))}
-      </Stack>
-
-      {standings.length === 0 && (
-        <Box textAlign="center" py={8}>
-          <Text color="text-gray-400">
-            No standings available yet.
-          </Text>
-        </Box>
+      {standings.length > 0 ? (
+        <StandingsList standings={standings} />
+      ) : (
+        <EmptyState
+          icon={Trophy}
+          title="No standings available"
+          description="This team hasn't participated in any leagues yet."
+        />
       )}
     </Card>
   );