regionals enrollments

src/features/tournaments/components/upcoming-tournament/enrolled-players-list-button.tsx

@@ -0,0 +1,46 @@
+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;