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