match h2h

src/features/matches/components/match-card.tsx

@@ -1,17 +1,22 @@
-import { Text, Group, Stack, Paper, Indicator, Box, Tooltip } from "@mantine/core";
-import { CrownIcon } from "@phosphor-icons/react";
+import { Text, Group, Stack, Paper, Indicator, Box, Tooltip, ActionIcon } from "@mantine/core";
+import { CrownIcon, FootballHelmetIcon } 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";
 import { Suspense } from "react";
+import { useSheet } from "@/hooks/use-sheet";
+import Sheet from "@/components/sheet/sheet";
+import TeamHeadToHeadSheet from "./team-head-to-head-sheet";
 
 interface MatchCardProps {
   match: Match;
+  hideH2H?: boolean;
 }
 
-const MatchCard = ({ match }: MatchCardProps) => {
+const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
   const navigate = useNavigate();
+  const h2hSheet = useSheet();
   const isHomeWin = match.home_cups > match.away_cups;
   const isAwayWin = match.away_cups > match.home_cups;
   const isStarted = match.status === "started";
@@ -30,15 +35,13 @@ const MatchCard = ({ match }: MatchCardProps) => {
     }
   };
 
+  const handleH2HClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    h2hSheet.open();
+  };
+
   return (
-    <Indicator
-      disabled={!isStarted}
-      size={12}
-      color="red"
-      processing
-      position="top-end"
-      offset={24}
-    >
+    <>
       <Box style={{ position: "relative" }}>
         <Paper
           px="md"
@@ -48,15 +51,58 @@ const MatchCard = ({ match }: MatchCardProps) => {
           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 gap="xs" justify="space-between">
+              <Group gap="xs" style={{ flex: 1 }}>
+                {isStarted && (
+                  <Indicator
+                    size={8}
+                    color="red"
+                    processing
+                    position="middle-start"
+                    offset={0}
+                  />
+                )}
+                <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>
+              {match.home && match.away && !hideH2H && (
+                <Tooltip label="Head to Head" withArrow position="left">
+                  <ActionIcon
+                    variant="subtle"
+                    size="sm"
+                    onClick={handleH2HClick}
+                    aria-label="View head-to-head"
+                    w={40}
+                  >
+                    <Group style={{ position: 'relative', width: 27.5, height: 16 }}>
+                      <FootballHelmetIcon
+                        size={14}
+                        style={{
+                          position: 'absolute',
+                          left: 0,
+                          top: 0,
+                          transform: 'rotate(25deg)',
+                        }}
+                      />
+                      <FootballHelmetIcon
+                        size={14}
+                        style={{
+                          position: 'absolute',
+                          right: 0,
+                          top: 0,
+                          transform: 'scaleX(-1) rotate(25deg)',
+                        }}
+                      />
+                    </Group>
+                  </ActionIcon>
+                </Tooltip>
+              )}
             </Group>
 
             <Group justify="space-between" align="center">
@@ -205,7 +251,16 @@ const MatchCard = ({ match }: MatchCardProps) => {
           </Suspense>
         </Paper>
       </Box>
-    </Indicator>
+
+      {match.home && match.away && (
+        <Sheet
+          title="Head to Head"
+          {...h2hSheet.props}
+        >
+          <TeamHeadToHeadSheet team1={match.home} team2={match.away} />
+        </Sheet>
+      )}
+    </>
   );
 };