103 lines
3.2 KiB
TypeScript
103 lines
3.2 KiB
TypeScript
import { Stack, Group, Text, ThemeIcon, Box, Center } from "@mantine/core";
|
|
import { CrownIcon, MedalIcon } from "@phosphor-icons/react";
|
|
import { Tournament } from "../types";
|
|
|
|
interface PodiumProps {
|
|
tournament: Tournament;
|
|
}
|
|
|
|
export const Podium = ({ tournament }: PodiumProps) => {
|
|
if (!tournament.first_place) return;
|
|
|
|
return (
|
|
<Stack gap="xs" px="md">
|
|
{tournament.first_place && (
|
|
<Group
|
|
gap="md"
|
|
p="md"
|
|
style={{
|
|
backgroundColor: 'var(--mantine-color-yellow-light)',
|
|
borderRadius: 'var(--mantine-radius-md)',
|
|
border: '3px solid var(--mantine-color-yellow-outline)',
|
|
boxShadow: 'var(--mantine-shadow-md)',
|
|
}}
|
|
>
|
|
<ThemeIcon size="xl" color="yellow" variant="light" radius="xl">
|
|
<CrownIcon size={24} />
|
|
</ThemeIcon>
|
|
<Stack gap={4} style={{ flex: 1 }}>
|
|
<Text size="md" fw={600}>
|
|
{tournament.first_place.name}
|
|
</Text>
|
|
<Group gap="xs">
|
|
{tournament.first_place.players?.map((player) => (
|
|
<Text key={player.id} size="sm" c="dimmed">
|
|
{player.first_name} {player.last_name}
|
|
</Text>
|
|
))}
|
|
</Group>
|
|
</Stack>
|
|
</Group>
|
|
)}
|
|
|
|
{tournament.second_place && (
|
|
<Group
|
|
gap="md"
|
|
p="xs"
|
|
style={{
|
|
backgroundColor: 'var(--mantine-color-default)',
|
|
borderRadius: 'var(--mantine-radius-md)',
|
|
border: '2px solid var(--mantine-color-default-border)',
|
|
boxShadow: 'var(--mantine-shadow-sm)',
|
|
}}
|
|
>
|
|
<ThemeIcon size="lg" color="gray" variant="light" radius="xl">
|
|
<MedalIcon size={20} />
|
|
</ThemeIcon>
|
|
<Stack gap={4} style={{ flex: 1 }}>
|
|
<Text size="sm" fw={600}>
|
|
{tournament.second_place.name}
|
|
</Text>
|
|
<Group gap="xs">
|
|
{tournament.second_place.players?.map((player) => (
|
|
<Text key={player.id} size="xs" c="dimmed">
|
|
{player.first_name} {player.last_name}
|
|
</Text>
|
|
))}
|
|
</Group>
|
|
</Stack>
|
|
</Group>
|
|
)}
|
|
|
|
{tournament.third_place && (
|
|
<Group
|
|
gap="md"
|
|
p="xs"
|
|
style={{
|
|
backgroundColor: 'var(--mantine-color-orange-light)',
|
|
borderRadius: 'var(--mantine-radius-md)',
|
|
border: '2px solid var(--mantine-color-orange-outline)',
|
|
boxShadow: 'var(--mantine-shadow-sm)',
|
|
}}
|
|
>
|
|
<ThemeIcon size="lg" color="orange" variant="light" radius="xl">
|
|
<MedalIcon size={18} />
|
|
</ThemeIcon>
|
|
<Stack gap={4} style={{ flex: 1 }}>
|
|
<Text size="sm" fw={600}>
|
|
{tournament.third_place.name}
|
|
</Text>
|
|
<Group gap="xs">
|
|
{tournament.third_place.players?.map((player) => (
|
|
<Text key={player.id} size="xs" c="dimmed">
|
|
{player.first_name} {player.last_name}
|
|
</Text>
|
|
))}
|
|
</Group>
|
|
</Stack>
|
|
</Group>
|
|
)}
|
|
</Stack>
|
|
);
|
|
};
|