seed tournament done

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

@@ -1,5 +1,5 @@
-import { ActionIcon, Card, Flex, Text } from "@mantine/core";
-import { PlayIcon } from "@phosphor-icons/react";
+import { ActionIcon, Card, Flex, Text, Stack } from "@mantine/core";
+import { PlayIcon, PencilIcon } from "@phosphor-icons/react";
 import React, { useCallback, useMemo } from "react";
 import { MatchSlot } from "./match-slot";
 import { Match } from "@/features/matches/types";
@@ -34,65 +34,79 @@ export const MatchCard: React.FC<MatchCardProps> = ({
     [match]
   );
 
-  const showAnnounce = useMemo(
-    () => onAnnounce && match.home && match.away,
-    [onAnnounce, match.home, match.away]
+  const showToolbar = useMemo(
+    () => match.home && match.away,
+    [match.home, match.away]
   );
 
   const handleAnnounce = useCallback(
     () => onAnnounce?.(match.home, match.away),
-    [match.home, match.away]
+    [onAnnounce, match.home, match.away]
   );
 
+  const handleEdit = useCallback(() => {
+    // TODO: implement edit functionality
+    console.log('Edit match:', match);
+  }, [match]);
+
   return (
     <Flex direction="row" align="center" justify="end" gap={8}>
       <Text c="dimmed" fw="bolder">
         {match.order}
       </Text>
-      <Card
-        withBorder
-        pos="relative"
-        w={200}
-        style={{ overflow: "visible" }}
-        data-match-lid={match.lid}
-      >
-        <Card.Section withBorder p={0}>
-          <MatchSlot {...homeSlot} />
-        </Card.Section>
+      <Flex align="stretch">
+        <Card
+          withBorder
+          pos="relative"
+          w={200}
+          style={{ overflow: "visible" }}
+          data-match-lid={match.lid}
+        >
+          <Card.Section withBorder p={0}>
+            <MatchSlot {...homeSlot} />
+          </Card.Section>
 
-        <Card.Section p={0} mb={-16}>
-          <MatchSlot {...awaySlot} />
-        </Card.Section>
+          <Card.Section p={0} mb={-16}>
+            <MatchSlot {...awaySlot} />
+          </Card.Section>
 
-        {match.reset && (
-          <Text
-            pos="absolute"
-            top={-20}
-            left={8}
-            size="xs"
-            c="dimmed"
-            fw="bold"
+          {match.reset && (
+            <Text
+              pos="absolute"
+              top={-20}
+              left={8}
+              size="xs"
+              c="dimmed"
+              fw="bold"
+            >
+              * If necessary
+            </Text>
+          )}
+        </Card>
+
+        {showToolbar && (
+          <Flex
+            direction="column"
+            justify="center"
+            align="center"
           >
-            * If necessary
-          </Text>
+            <ActionIcon
+              color="green"
+              onClick={handleAnnounce}
+              size="sm"
+              h='100%'
+              radius='sm'
+              ml={-4}
+              style={{
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+              }}
+            >
+              <PlayIcon size={14} />
+            </ActionIcon>
+          </Flex>
         )}
-
-        {showAnnounce && (
-          <ActionIcon
-            pos="absolute"
-            variant="filled"
-            color="green"
-            top={-20}
-            right={-12}
-            onClick={handleAnnounce}
-            bd="none"
-            style={{ boxShadow: "none" }}
-            size="xs"
-          >
-            <PlayIcon size={12} />
-          </ActionIcon>
-        )}
-      </Card>
+      </Flex>
     </Flex>
   );
 };