50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
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;
|