49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { Flex, Text, Select, Card } from "@mantine/core";
|
|
|
|
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>
|
|
);
|
|
}
|