style upgrades
This commit is contained in:
@@ -1,101 +1,145 @@
|
||||
import { Stack, Group, Text, ThemeIcon, Box, Center } from "@mantine/core";
|
||||
import { Stack, Group, Text, ThemeIcon } from "@mantine/core";
|
||||
import { CrownIcon, MedalIcon } from "@phosphor-icons/react";
|
||||
import { TeamInfo } from "@/features/teams/types";
|
||||
import { Tournament } from "../types";
|
||||
|
||||
interface PodiumProps {
|
||||
tournament: Tournament;
|
||||
}
|
||||
|
||||
type PodiumTier = "first" | "second" | "third";
|
||||
|
||||
const tierStyles: Record<PodiumTier, React.CSSProperties> = {
|
||||
first: {
|
||||
background:
|
||||
"light-dark(color-mix(in srgb, var(--mantine-color-yellow-4) 10%, var(--mantine-color-white)), color-mix(in srgb, var(--mantine-color-yellow-8) 16%, var(--mantine-color-dark-6)))",
|
||||
border:
|
||||
"1px solid light-dark(color-mix(in srgb, var(--mantine-color-yellow-6) 45%, var(--mantine-color-gray-3)), color-mix(in srgb, var(--mantine-color-yellow-6) 35%, var(--mantine-color-dark-4)))",
|
||||
borderRadius: "var(--mantine-radius-md)",
|
||||
boxShadow: "var(--mantine-shadow-md)",
|
||||
},
|
||||
second: {
|
||||
background:
|
||||
"light-dark(color-mix(in srgb, var(--mantine-color-gray-5) 10%, var(--mantine-color-white)), color-mix(in srgb, var(--mantine-color-gray-5) 10%, var(--mantine-color-dark-6)))",
|
||||
border:
|
||||
"1px solid light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
|
||||
borderRadius: "var(--mantine-radius-md)",
|
||||
boxShadow: "var(--mantine-shadow-xs)",
|
||||
},
|
||||
third: {
|
||||
background:
|
||||
"light-dark(color-mix(in srgb, var(--mantine-color-orange-5) 8%, var(--mantine-color-white)), color-mix(in srgb, var(--mantine-color-orange-9) 14%, var(--mantine-color-dark-6)))",
|
||||
border:
|
||||
"1px solid light-dark(color-mix(in srgb, var(--mantine-color-orange-6) 35%, var(--mantine-color-gray-3)), color-mix(in srgb, var(--mantine-color-orange-7) 30%, var(--mantine-color-dark-4)))",
|
||||
borderRadius: "var(--mantine-radius-md)",
|
||||
boxShadow: "var(--mantine-shadow-xs)",
|
||||
},
|
||||
};
|
||||
|
||||
const tierConfig: Record<
|
||||
PodiumTier,
|
||||
{
|
||||
color: string;
|
||||
label: string;
|
||||
labelColor: string;
|
||||
icon: React.ReactNode;
|
||||
iconSize: "xl" | "lg";
|
||||
padding: "md" | "xs";
|
||||
nameSize: "md" | "sm";
|
||||
}
|
||||
> = {
|
||||
first: {
|
||||
color: "yellow",
|
||||
label: "Champions",
|
||||
labelColor:
|
||||
"light-dark(var(--mantine-color-yellow-8), var(--mantine-color-yellow-4))",
|
||||
icon: <CrownIcon size={24} />,
|
||||
iconSize: "xl",
|
||||
padding: "md",
|
||||
nameSize: "md",
|
||||
},
|
||||
second: {
|
||||
color: "gray",
|
||||
label: "2nd place",
|
||||
labelColor:
|
||||
"light-dark(var(--mantine-color-gray-6), var(--mantine-color-gray-4))",
|
||||
icon: <MedalIcon size={20} />,
|
||||
iconSize: "lg",
|
||||
padding: "xs",
|
||||
nameSize: "sm",
|
||||
},
|
||||
third: {
|
||||
color: "orange",
|
||||
label: "3rd place",
|
||||
labelColor:
|
||||
"light-dark(var(--mantine-color-orange-8), var(--mantine-color-orange-4))",
|
||||
icon: <MedalIcon size={18} />,
|
||||
iconSize: "lg",
|
||||
padding: "xs",
|
||||
nameSize: "sm",
|
||||
},
|
||||
};
|
||||
|
||||
const PodiumRow = ({ team, tier }: { team: TeamInfo; tier: PodiumTier }) => {
|
||||
const config = tierConfig[tier];
|
||||
|
||||
return (
|
||||
<Group gap="md" p={config.padding} style={tierStyles[tier]}>
|
||||
<ThemeIcon
|
||||
size={config.iconSize}
|
||||
color={config.color}
|
||||
variant="light"
|
||||
radius="xl"
|
||||
>
|
||||
{config.icon}
|
||||
</ThemeIcon>
|
||||
<Stack gap={4} style={{ flex: 1 }}>
|
||||
<Text size={config.nameSize} fw={tier === "first" ? 700 : 600}>
|
||||
{team.name}
|
||||
</Text>
|
||||
<Group gap="xs">
|
||||
{team.players?.map((player) => (
|
||||
<Text
|
||||
key={player.id}
|
||||
size={tier === "first" ? "sm" : "xs"}
|
||||
c="dimmed"
|
||||
>
|
||||
{player.first_name} {player.last_name}
|
||||
</Text>
|
||||
))}
|
||||
</Group>
|
||||
</Stack>
|
||||
<Text
|
||||
size="10px"
|
||||
fw={700}
|
||||
tt="uppercase"
|
||||
style={{
|
||||
letterSpacing: "0.08em",
|
||||
alignSelf: "flex-start",
|
||||
color: config.labelColor,
|
||||
}}
|
||||
mt={4}
|
||||
mr={4}
|
||||
>
|
||||
{config.label}
|
||||
</Text>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
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>
|
||||
<PodiumRow team={tournament.first_place} tier="first" />
|
||||
)}
|
||||
|
||||
{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>
|
||||
<PodiumRow team={tournament.second_place} tier="second" />
|
||||
)}
|
||||
|
||||
{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>
|
||||
<PodiumRow team={tournament.third_place} tier="third" />
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user