improvements

src/features/tournaments/components/podium.tsx

@@ -0,0 +1,112 @@
+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 (
+      <Box p="md">
+        <Center>
+          <Text c="dimmed" size="sm">
+            Podium will appear here when the tournament is over
+          </Text>
+        </Center>
+      </Box>
+    );
+  }
+
+  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>
+  );
+};