174 lines
5.2 KiB
TypeScript
174 lines
5.2 KiB
TypeScript
import { Text, Group, Stack, Paper, Indicator, Box } from "@mantine/core";
|
|
import { CrownIcon } from "@phosphor-icons/react";
|
|
import { useNavigate } from "@tanstack/react-router";
|
|
import { Match } from "../types";
|
|
import Avatar from "@/components/avatar";
|
|
import EmojiBar from "@/features/reactions/components/emoji-bar";
|
|
|
|
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={24}
|
|
>
|
|
<Box style={{ position: "relative" }}>
|
|
<Paper
|
|
px="md"
|
|
py="md"
|
|
withBorder
|
|
radius="md"
|
|
style={{ position: "relative", zIndex: 2 }}
|
|
>
|
|
<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"
|
|
src={
|
|
match.home?.logo
|
|
? `/api/files/teams/${match.home?.id}/${match.home?.logo}`
|
|
: undefined
|
|
}
|
|
/>
|
|
{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"
|
|
src={
|
|
match.away?.logo
|
|
? `/api/files/teams/${match.away?.id}/${match.away?.logo}`
|
|
: undefined
|
|
}
|
|
/>
|
|
{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>
|
|
|
|
<Paper
|
|
px="md"
|
|
pb={4}
|
|
style={{
|
|
position: "relative",
|
|
zIndex: 1,
|
|
marginTop: -6,
|
|
paddingTop: 8,
|
|
backgroundColor: "var(--mantine-color-gray-light)",
|
|
borderTop: "none",
|
|
borderRadius:
|
|
"0 0 var(--mantine-radius-md) var(--mantine-radius-md)",
|
|
border: "1px solid var(--mantine-color-default-border)",
|
|
}}
|
|
>
|
|
<EmojiBar />
|
|
</Paper>
|
|
</Box>
|
|
</Indicator>
|
|
);
|
|
};
|
|
|
|
export default MatchCard;
|