51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { Stack, Text, Card, Group, Box } from "@mantine/core";
|
|
import { TeamInfo } from "@/features/teams/types";
|
|
import TeamAvatar from "@/components/team-avatar";
|
|
|
|
interface GroupAssignment {
|
|
groupIndex: number;
|
|
groupName: string;
|
|
teams: TeamInfo[];
|
|
}
|
|
|
|
interface GroupPreviewProps {
|
|
groups: GroupAssignment[];
|
|
}
|
|
|
|
const GroupPreview: React.FC<GroupPreviewProps> = ({ groups }) => {
|
|
return (
|
|
<Stack gap="md">
|
|
{groups.map((group) => (
|
|
<Card key={group.groupIndex} withBorder radius="md" p="md" w="fit-content">
|
|
<Stack gap="sm">
|
|
<Group gap="xs" align="center">
|
|
<Text fw={600} size="sm">
|
|
Group {group.groupName}
|
|
</Text>
|
|
<Text size="xs" c="dimmed">
|
|
({group.teams.length} teams)
|
|
</Text>
|
|
</Group>
|
|
|
|
<Stack gap="xs">
|
|
{group.teams.map((team, index) => (
|
|
<Group key={team.id} gap="sm" align="center" wrap="nowrap">
|
|
<Text size="xs" c="dimmed" w={20} ta="right">
|
|
{index + 1}
|
|
</Text>
|
|
<TeamAvatar team={team} size={24} radius="sm" isRegional />
|
|
<Text size="sm" truncate style={{ flex: 1 }}>
|
|
{team.name}
|
|
</Text>
|
|
</Group>
|
|
))}
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
))}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default GroupPreview;
|