init

src/features/teams/components/team-list.tsx

@@ -0,0 +1,42 @@
+import { Group, List, ListItem, Skeleton, Stack, Text } from "@mantine/core";
+import Avatar from "@/components/avatar";
+import { Team } from "@/features/teams/types";
+import { useNavigate } from "@tanstack/react-router";
+
+interface TeamListProps {
+  teams: Team[];
+  loading?: boolean;
+}
+
+const TeamList = ({ teams, loading = false }: TeamListProps) => {
+  const navigate = useNavigate();
+
+  if (loading) return <List>
+    {Array.from({ length: 10 }).map((_, i) => (
+      <ListItem py='xs'
+        icon={<Skeleton height={40} width={40} />}
+      >
+        <Skeleton height={35} width={200} />
+      </ListItem>
+    ))}
+  </List>
+
+  return <List>
+    {teams?.map((team) => (
+        <ListItem key={team.id}
+          py='xs'
+          icon={<Avatar radius='sm' size={40} name={`${team.name}`} />}
+          style={{ cursor: 'pointer' }}
+          onClick={() => navigate({ to: `/teams/${team.id}` })}
+          >
+            <Stack gap={0}>
+              <Text fw={500}>{`${team.name}`}</Text>
+              {team.players?.map(p => <Text size='xs' c='dimmed'>{p.first_name} {p.last_name}</Text>)}
+            </Stack>
+
+        </ListItem>
+    ))}
+  </List>
+}
+
+export default TeamList;