regionals enrollments

src/features/tournaments/components/team-assignment-preview.tsx

@@ -0,0 +1,49 @@
+import { Card, Group, Stack, Text, Avatar } from "@mantine/core";
+import { PlayerInfo } from "@/features/players/types";
+import PlayerAvatar from "@/components/player-avatar";
+
+interface TeamAssignment {
+  player1: PlayerInfo;
+  player2: PlayerInfo;
+  teamName: string;
+}
+
+interface TeamAssignmentPreviewProps {
+  assignments: TeamAssignment[];
+}
+
+const TeamAssignmentPreview: React.FC<TeamAssignmentPreviewProps> = ({ assignments }) => {
+  return (
+    <Stack gap="sm">
+      {assignments.map((assignment, index) => (
+        <Card key={index} withBorder radius="md" p="md">
+          <Group gap="md" align="center" wrap="nowrap">
+            <Text size="sm" fw={600} c="dimmed" w={40}>
+              #{index + 1}
+            </Text>
+
+            <Group gap="sm" style={{ flex: 1 }} align="center">
+              <PlayerAvatar name={`${assignment.player1.first_name} ${assignment.player1.last_name}`} size={32} />
+              <Text size="sm" fw={500}>
+                {assignment.player1.first_name} {assignment.player1.last_name}
+              </Text>
+            </Group>
+
+            <Text size="lg" c="dimmed">
+              &
+            </Text>
+
+            <Group gap="sm" style={{ flex: 1 }} align="center">
+              <PlayerAvatar name={`${assignment.player2.first_name} ${assignment.player2.last_name}`} size={32} />
+              <Text size="sm" fw={500}>
+                {assignment.player2.first_name} {assignment.player2.last_name}
+              </Text>
+            </Group>
+          </Group>
+        </Card>
+      ))}
+    </Stack>
+  );
+};
+
+export default TeamAssignmentPreview;