init

src/features/players/components/player-list.tsx

@@ -0,0 +1,40 @@
+import { List, ListItem, Skeleton, Text } from "@mantine/core";
+import { useNavigate } from "@tanstack/react-router";
+import Avatar from "@/components/avatar";
+import { Player } from "@/features/players/types";
+
+interface PlayerListProps {
+  players: Player[];
+  loading?: boolean;
+}
+
+const PlayerList = ({ players, loading = false }: PlayerListProps) => {
+  const navigate = useNavigate();
+  
+  if (loading) return <List>
+    {Array.from({ length: 10 }).map((_, i) => (
+      <ListItem py='xs'
+        icon={<Skeleton circle height={40} width={40} />}
+      >
+        <Skeleton height={20} width={200} />
+      </ListItem>
+    ))}
+  </List>
+
+  return <List>
+    {players?.map((player) => (
+      <ListItem key={player.id}
+        py='xs'
+        icon={<Avatar size={40} name={`${player.first_name} ${player.last_name}`} />}
+        style={{ cursor: 'pointer' }}
+        onClick={() => {
+          navigate({ to: `/profile/${player.id}` });
+        }}
+      >
+        <Text fw={500}>{`${player.first_name} ${player.last_name}`}</Text>
+      </ListItem>
+    ))}
+  </List>
+}
+
+export default PlayerList;