groups init

src/features/tournaments/components/group-preview.tsx

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