init

src/features/bracket/components/seed-list.tsx

@@ -0,0 +1,49 @@
+import { Flex, Text, Select, Card } from '@mantine/core';
+import React from 'react';
+
+interface Team {
+  id: string;
+  name: string;
+}
+
+interface SeedListProps {
+  teams: Team[];
+  onSeedChange: (currentIndex: number, newIndex: number) => void;
+}
+
+export function SeedList({ teams, onSeedChange }: SeedListProps) {
+  const seedOptions = teams.map((_, index) => ({
+    value: index.toString(),
+    label: `Seed ${index + 1}`
+  }));
+
+  return (
+    <Flex direction='column' gap={8}>
+      {teams.map((team, index) => (
+        <Card key={team.id} withBorder p="xs">
+          <Flex align="center" gap="xs" justify="space-between">
+            <Flex align="center" gap="xs">
+              <Select
+                value={index.toString()}
+                data={seedOptions}
+                onChange={(value) => {
+                  if (value !== null) {
+                    const newIndex = parseInt(value);
+                    if (newIndex !== index) {
+                      onSeedChange(index, newIndex);
+                    }
+                  }
+                }}
+                size="xs"
+                w={100}
+              />
+              <Text size="sm" fw={500}>
+                {team.name}
+              </Text>
+            </Flex>
+          </Flex>
+        </Card>
+      ))}
+    </Flex>
+  );
+}