62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { Anchor, Box, Group, Stack } from "@mantine/core";
|
|
import { CaretRightIcon } from "@phosphor-icons/react";
|
|
import { useNavigate } from "@tanstack/react-router";
|
|
import MatchCard from "@/features/matches/components/match-card";
|
|
import { Match } from "@/features/matches/types";
|
|
import SectionHeading from "./section-heading";
|
|
|
|
interface RecentResultsProps {
|
|
/** Ended matches, already sorted most-recent-first. */
|
|
matches: Match[];
|
|
tournamentId: string;
|
|
/** How many to show inline before offering "View all results". */
|
|
max?: number;
|
|
}
|
|
|
|
/**
|
|
* Recently finished matches, newest on top, so people can look back and react
|
|
* (each MatchCard carries its own reaction bar). Caps the inline list and links
|
|
* to the full bracket when there are more results than fit.
|
|
*/
|
|
const RecentResults = ({ matches, tournamentId, max = 5 }: RecentResultsProps) => {
|
|
const navigate = useNavigate();
|
|
|
|
if (matches.length === 0) return null;
|
|
|
|
const shown = matches.slice(0, max);
|
|
const hasMore = matches.length > max;
|
|
|
|
return (
|
|
<Box>
|
|
<SectionHeading
|
|
label="Recently finished"
|
|
action={
|
|
hasMore ? (
|
|
<Anchor
|
|
component="button"
|
|
type="button"
|
|
size="xs"
|
|
fw={600}
|
|
onClick={() =>
|
|
navigate({ to: `/tournaments/${tournamentId}/bracket` })
|
|
}
|
|
>
|
|
<Group gap={2} align="center" wrap="nowrap">
|
|
View all results
|
|
<CaretRightIcon size={12} weight="bold" />
|
|
</Group>
|
|
</Anchor>
|
|
) : undefined
|
|
}
|
|
/>
|
|
<Stack gap="sm" px="md">
|
|
{shown.map((match) => (
|
|
<MatchCard key={match.id} match={match} />
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default RecentResults;
|