145 lines
4.2 KiB
TypeScript
145 lines
4.2 KiB
TypeScript
import {
|
|
Card,
|
|
Text,
|
|
Stack,
|
|
Group,
|
|
UnstyledButton,
|
|
Badge,
|
|
Title,
|
|
} 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;
|
|
}
|
|
|
|
const tournamentCardCss = `
|
|
.flxn-tournament-card {
|
|
transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
|
|
}
|
|
@media (hover: hover) {
|
|
.flxn-tournament-card.flxn-tournament-card:hover {
|
|
border-color: color-mix(in srgb, var(--mantine-primary-color-filled) 40%, var(--mantine-color-default-border));
|
|
box-shadow: var(--mantine-shadow-sm);
|
|
}
|
|
}
|
|
.flxn-tournament-card.flxn-tournament-card:active {
|
|
border-color: color-mix(in srgb, var(--mantine-primary-color-filled) 55%, var(--mantine-color-default-border));
|
|
box-shadow: none;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.flxn-tournament-card {
|
|
transition: none;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const TournamentCard = ({ tournament }: TournamentCardProps) => {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<UnstyledButton
|
|
w="100%"
|
|
onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}
|
|
style={{ borderRadius: "var(--mantine-radius-md)" }}
|
|
>
|
|
<style href="flxn-tournament-card" precedence="medium">
|
|
{tournamentCardCss}
|
|
</style>
|
|
<Card
|
|
withBorder
|
|
radius="md"
|
|
p="lg"
|
|
w="100%"
|
|
className="flxn-tournament-card"
|
|
>
|
|
<Group justify="space-between" align="center">
|
|
<Group gap="md" align="center">
|
|
<Avatar
|
|
size={75}
|
|
radius="sm"
|
|
name={tournament.name}
|
|
contain
|
|
src={
|
|
tournament.logo
|
|
? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
|
|
: undefined
|
|
}
|
|
>
|
|
<TrophyIcon size={20} />
|
|
</Avatar>
|
|
<Stack gap="xs">
|
|
<Title mb={-6} order={3} lineClamp={2}>
|
|
{tournament.name}
|
|
</Title>
|
|
{((tournament.first_place || tournament.second_place || tournament.third_place) && !tournament.regional) && (
|
|
<Stack gap={6} >
|
|
{tournament.first_place && (
|
|
<Badge
|
|
size="sm"
|
|
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="sm"
|
|
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="sm"
|
|
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>
|
|
);
|
|
};
|