refactor(enrollment): drop count header, keep player-count warnings

This commit is contained in:
2026-08-26 19:12:33 -07:00
parent 4106c3c846
commit f13e5b752a
8 changed files with 70 additions and 105 deletions
@@ -1,48 +0,0 @@
import { Alert, Group, Stack, Text } from "@mantine/core";
import { WarningCircleIcon } from "@phosphor-icons/react";
import { Trans, Plural } from "@lingui/react/macro";
interface EnrollmentStatsProps {
count: number;
regional?: boolean;
}
const EnrollmentStats = (props: EnrollmentStatsProps) => {
const hasOddPlayers = props.count % 2 !== 0;
const hasEnoughPlayers = props.count >= 2;
return (
<Stack gap="xs">
<Group gap="xs" align="baseline">
<Text size="xl" fw={700}>
{props.count}
</Text>
<Text size="sm" c="dimmed">
{props.regional ? (
<Plural
value={props.count}
one="player enrolled"
other="players enrolled"
/>
) : (
<Trans>Enrolled Teams</Trans>
)}
</Text>
</Group>
{props.regional && !hasEnoughPlayers && (
<Alert color="yellow" icon={<WarningCircleIcon size={16} />}>
<Trans>Need at least 2 players to create teams</Trans>
</Alert>
)}
{props.regional && hasOddPlayers && (
<Alert color="red" icon={<WarningCircleIcon size={16} />}>
<Trans>Cannot create teams with an odd number of players. Please have one player unenroll.</Trans>
</Alert>
)}
</Stack>
);
};
export default EnrollmentStats;
@@ -0,0 +1,28 @@
import { Alert, Stack } from "@mantine/core";
import { WarningCircleIcon } from "@phosphor-icons/react";
import { Trans } from "@lingui/react/macro";
const EnrollmentWarnings = ({ count }: { count: number }) => {
const hasOddPlayers = count % 2 !== 0;
const hasEnoughPlayers = count >= 2;
if (hasEnoughPlayers && !hasOddPlayers) return null;
return (
<Stack gap="xs">
{!hasEnoughPlayers && (
<Alert color="yellow" icon={<WarningCircleIcon size={16} />}>
<Trans>Need at least 2 players to create teams</Trans>
</Alert>
)}
{hasEnoughPlayers && hasOddPlayers && (
<Alert color="red" icon={<WarningCircleIcon size={16} />}>
<Trans>Cannot create teams with an odd number of players. Please have one player unenroll.</Trans>
</Alert>
)}
</Stack>
);
};
export default EnrollmentWarnings;
@@ -18,7 +18,7 @@ import Typeahead, { TypeaheadOption } from "@/components/typeahead";
import { usePlayers } from "@/features/players/queries";
import useAdminEnrollPlayer from "../../hooks/use-admin-enroll-player";
import useAdminUnenrollPlayer from "../../hooks/use-admin-unenroll-player";
import EnrollmentStats from "./enrollment-stats";
import EnrollmentWarnings from "./enrollment-warnings";
interface FreeAgentSectionProps {
tournamentId: string;
@@ -117,7 +117,7 @@ const FreeAgentSection = ({ tournamentId }: FreeAgentSectionProps) => {
return (
<Stack gap="lg" w="100%">
<EnrollmentStats count={enrolledPlayers.length} regional />
<EnrollmentWarnings count={enrolledPlayers.length} />
<Box
pos="sticky"
@@ -21,7 +21,6 @@ import Sheet from "@/components/sheet/sheet";
import TeamForm from "@/features/teams/components/team-form";
import { useTeam } from "@/features/teams/queries";
import { useSheet } from "@/hooks/use-sheet";
import EnrollmentStats from "./enrollment-stats";
interface TeamSectionProps {
tournamentId: string;
@@ -200,8 +199,6 @@ const TeamSection = ({ tournamentId }: TeamSectionProps) => {
return (
<>
<Stack gap="lg" w="100%">
<EnrollmentStats count={enrolledTeams.length} />
<Box
pos="sticky"
top={0}