147 lines
3.9 KiB
TypeScript
147 lines
3.9 KiB
TypeScript
import {
|
|
Text,
|
|
Group,
|
|
Stack,
|
|
Paper,
|
|
ThemeIcon,
|
|
Indicator,
|
|
Box,
|
|
Badge,
|
|
Skeleton,
|
|
} from "@mantine/core";
|
|
import { TrophyIcon, CrownIcon } from "@phosphor-icons/react";
|
|
import { useNavigate } from "@tanstack/react-router";
|
|
import { Match } from "../types";
|
|
import Avatar from "@/components/avatar";
|
|
|
|
interface MatchCardProps {
|
|
match: Match;
|
|
}
|
|
|
|
const MatchCard = ({ match }: MatchCardProps) => {
|
|
const navigate = useNavigate();
|
|
const isHomeWin = match.home_cups > match.away_cups;
|
|
const isAwayWin = match.away_cups > match.home_cups;
|
|
const isStarted = match.status === "started";
|
|
|
|
const handleHomeTeamClick = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
if (match.home?.id) {
|
|
navigate({ to: `/teams/${match.home.id}` });
|
|
}
|
|
};
|
|
|
|
const handleAwayTeamClick = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
if (match.away?.id) {
|
|
navigate({ to: `/teams/${match.away.id}` });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Indicator
|
|
disabled={!isStarted}
|
|
size={12}
|
|
color="red"
|
|
processing
|
|
position="top-end"
|
|
offset={2}
|
|
>
|
|
<Paper p="md" withBorder radius="md">
|
|
<Stack gap="sm">
|
|
<Group gap="xs">
|
|
<Text size="xs" fw={600} lineClamp={1} c="dimmed">
|
|
{match.tournament.name}
|
|
</Text>
|
|
<Text c="dimmed">-</Text>
|
|
<Text size="xs" c="dimmed">
|
|
Round {match.round + 1}
|
|
{match.is_losers_bracket && " (Losers)"}
|
|
</Text>
|
|
</Group>
|
|
|
|
<Group justify="space-between" align="center">
|
|
<Group gap="sm" style={{ flex: 1 }}>
|
|
<Box
|
|
style={{ position: "relative", cursor: "pointer" }}
|
|
onClick={handleHomeTeamClick}
|
|
>
|
|
<Avatar size={40} name={match.home?.name!} radius="sm" />
|
|
{isHomeWin && (
|
|
<Box
|
|
style={{
|
|
position: "absolute",
|
|
top: -10,
|
|
left: -4,
|
|
transform: "rotate(-25deg)",
|
|
color: "gold",
|
|
}}
|
|
>
|
|
<CrownIcon size={16} weight="fill" />
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
<Text
|
|
size="md"
|
|
fw={600}
|
|
lineClamp={1}
|
|
style={{ minWidth: 0, flex: 1 }}
|
|
>
|
|
{match.home?.name!}
|
|
</Text>
|
|
</Group>
|
|
<Text
|
|
size="xl"
|
|
fw={700}
|
|
c={"dimmed"}
|
|
>
|
|
{match.home_cups}
|
|
</Text>
|
|
</Group>
|
|
|
|
<Group justify="space-between" align="center">
|
|
<Group gap="sm" style={{ flex: 1 }}>
|
|
<Box
|
|
style={{ position: "relative", cursor: "pointer" }}
|
|
onClick={handleAwayTeamClick}
|
|
>
|
|
<Avatar size={40} name={match.away?.name!} radius="sm" />
|
|
{isAwayWin && (
|
|
<Box
|
|
style={{
|
|
position: "absolute",
|
|
top: -10,
|
|
left: -4,
|
|
transform: "rotate(-25deg)",
|
|
color: "gold",
|
|
}}
|
|
>
|
|
<CrownIcon size={16} weight="fill" />
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
<Text
|
|
size="md"
|
|
fw={600}
|
|
lineClamp={1}
|
|
style={{ minWidth: 0, flex: 1 }}
|
|
>
|
|
{match.away?.name}
|
|
</Text>
|
|
</Group>
|
|
<Text
|
|
size="xl"
|
|
fw={700}
|
|
c={"dimmed"}
|
|
>
|
|
{match.away_cups}
|
|
</Text>
|
|
</Group>
|
|
</Stack>
|
|
</Paper>
|
|
</Indicator>
|
|
);
|
|
};
|
|
|
|
export default MatchCard;
|