139 lines
3.9 KiB
TypeScript
139 lines
3.9 KiB
TypeScript
import {
|
|
Card,
|
|
Text,
|
|
Stack,
|
|
Group,
|
|
UnstyledButton,
|
|
Badge,
|
|
} from "@mantine/core";
|
|
import { TournamentInfo } from "@/features/tournaments/types";
|
|
import {
|
|
TrophyIcon,
|
|
CrownIcon,
|
|
MedalIcon,
|
|
} from "@phosphor-icons/react";
|
|
import { useNavigate } from "@tanstack/react-router";
|
|
import Avatar from "@/components/avatar";
|
|
|
|
interface TournamentCardProps {
|
|
tournament: TournamentInfo;
|
|
}
|
|
|
|
export const TournamentCard = ({ tournament }: TournamentCardProps) => {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<UnstyledButton
|
|
w="100%"
|
|
onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}
|
|
style={{ borderRadius: "var(--mantine-radius-md)" }}
|
|
styles={{
|
|
root: {
|
|
"&:hover": {
|
|
transform: "translateY(-2px)",
|
|
transition: "transform 0.15s ease",
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Card
|
|
withBorder
|
|
radius="md"
|
|
p="lg"
|
|
w="100%"
|
|
style={{
|
|
transition: "all 0.15s ease",
|
|
border: "1px solid var(--mantine-color-default-border)",
|
|
}}
|
|
styles={{
|
|
root: {
|
|
"&:hover": {
|
|
borderColor: "var(--mantine-primary-color-filled)",
|
|
boxShadow: "var(--mantine-shadow-sm)",
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Group justify="space-between" align="center">
|
|
<Group gap="md" align="center">
|
|
<Avatar
|
|
size={90}
|
|
radius="sm"
|
|
name={tournament.name}
|
|
contain
|
|
src={
|
|
tournament.logo
|
|
? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
|
|
: undefined
|
|
}
|
|
>
|
|
<TrophyIcon size={20} />
|
|
</Avatar>
|
|
<Stack gap="xs">
|
|
<Text fw={600} size="lg" lineClamp={2}>
|
|
{tournament.name}
|
|
</Text>
|
|
{(tournament.first_place || tournament.second_place || tournament.third_place) && (
|
|
<Stack gap={6} >
|
|
{tournament.first_place && (
|
|
<Badge
|
|
size="md"
|
|
radius="md"
|
|
variant="filled"
|
|
color="yellow"
|
|
leftSection={
|
|
<CrownIcon size={16} />
|
|
}
|
|
style={{
|
|
textTransform: 'none',
|
|
fontWeight: 600,
|
|
color: 'white',
|
|
}}
|
|
>
|
|
{tournament.first_place.name}
|
|
</Badge>
|
|
)}
|
|
{tournament.second_place && (
|
|
<Badge
|
|
size="md"
|
|
radius="md"
|
|
color="gray"
|
|
variant="filled"
|
|
leftSection={
|
|
<MedalIcon size={16} />
|
|
}
|
|
style={{
|
|
textTransform: 'none',
|
|
fontWeight: 500,
|
|
}}
|
|
>
|
|
{tournament.second_place.name}
|
|
</Badge>
|
|
)}
|
|
{tournament.third_place && (
|
|
<Badge
|
|
size="md"
|
|
radius="md"
|
|
color="orange"
|
|
variant="filled"
|
|
leftSection={
|
|
<MedalIcon size={16} />
|
|
}
|
|
style={{
|
|
textTransform: 'none',
|
|
fontWeight: 500,
|
|
}}
|
|
>
|
|
{tournament.third_place.name}
|
|
</Badge>
|
|
)}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Group>
|
|
</Group>
|
|
</Card>
|
|
</UnstyledButton>
|
|
);
|
|
};
|