kyle/flxn-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

reactions

Browse Source
This commit is contained in:
yohlo
2025-09-17 10:30:10 -05:00
parent 498010e3e2
commit cac42c9b29
5 changed files with 360 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/features/matches/components/match-card.tsx
View File

@@ -3,16 +3,14 @@ import {
Group,
Stack,
Paper,
ThemeIcon,
Indicator,
Box,
Badge,
Skeleton,
} from "@mantine/core";
import { TrophyIcon, CrownIcon } from "@phosphor-icons/react";
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;
@@ -47,98 +45,117 @@ const MatchCard = ({ match }: MatchCardProps) => {
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!}
<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>
<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>
<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="md"
fw={600}
lineClamp={1}
style={{ minWidth: 0, flex: 1 }}
size="xl"
fw={700}
c={"dimmed"}
>
{match.away?.name}
{match.home_cups}
</Text>
</Group>
<Text
size="xl"
fw={700}
c={"dimmed"}
>
{match.away_cups}
</Text>
</Group>
</Stack>
</Paper>
<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>
<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>
);
};