47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import ListButton from "@/components/list-button";
|
|
import Sheet from "@/components/sheet/sheet";
|
|
import { useSheet } from "@/hooks/use-sheet";
|
|
import { UserListIcon } from "@phosphor-icons/react";
|
|
import { useMemo } from "react";
|
|
import { useFreeAgents } from "../../queries";
|
|
import { Text } from "@mantine/core";
|
|
import PlayerList from "@/features/players/components/player-list";
|
|
import { Player } from "@/features/players/types";
|
|
|
|
interface EnrolledPlayersListButtonProps {
|
|
tournamentId: string;
|
|
}
|
|
|
|
const EnrolledPlayersListButton: React.FC<EnrolledPlayersListButtonProps> = ({ tournamentId }) => {
|
|
const { data: freeAgents } = useFreeAgents(tournamentId);
|
|
const count = useMemo(() => freeAgents.length, [freeAgents]);
|
|
const { open, isOpen, toggle } = useSheet();
|
|
|
|
const players = useMemo(() =>
|
|
freeAgents.map(agent => agent.player).filter((player): player is Player => player !== undefined),
|
|
[freeAgents]
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<ListButton
|
|
label={`View Enrolled Players (${count})`}
|
|
Icon={UserListIcon}
|
|
onClick={open}
|
|
/>
|
|
|
|
<Sheet title="Enrolled Players" opened={isOpen} onChange={toggle}>
|
|
{count === 0 ? (
|
|
<Text size="sm" c="dimmed" ta="center" py="xl">
|
|
No players enrolled yet
|
|
</Text>
|
|
) : (
|
|
<PlayerList players={players} />
|
|
)}
|
|
</Sheet>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default EnrolledPlayersListButton;
|