social overhaul

2026-07-22 15:47:34 -07:00
parent 9db3fa697d
commit 86cda294f9
45 changed files with 3026 additions and 430 deletions
@@ -0,0 +1,61 @@
+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;