more bracket refactor

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

@@ -0,0 +1,66 @@
+import { ActionIcon, Card, Text } from '@mantine/core';
+import { PlayIcon } from '@phosphor-icons/react';
+import React from 'react';
+import { MatchSlot } from './match-slot';
+import { Match } from '../types';
+
+interface MatchCardProps {
+  match: Match;
+  getParentMatchOrder: (parentLid: number) => number | string;
+  onAnnounce?: (teamOne: any, teamTwo: any) => void;
+}
+
+export const MatchCard: React.FC<MatchCardProps> = ({ 
+  match, 
+  getParentMatchOrder, 
+  onAnnounce 
+}) => {
+  return (
+    <Card
+      withBorder
+      pos="relative"
+      w={200}
+      style={{ overflow: 'visible' }}
+      data-match-lid={match.lid}
+    >
+      <Card.Section withBorder p={0}>
+        <MatchSlot slot={match.home} getParentMatchOrder={getParentMatchOrder} />
+      </Card.Section>
+      
+      <Card.Section p={0} mb={-16}>
+        <MatchSlot slot={match.away} getParentMatchOrder={getParentMatchOrder} />
+      </Card.Section>
+      
+      {match.reset && (
+        <Text
+          pos="absolute"
+          top={-8}
+          left={8}
+          size="xs"
+          c="orange"
+          fw="bold"
+        >
+          IF NECESSARY
+        </Text>
+      )}
+      
+      {onAnnounce && match.home?.team && match.away?.team && (
+        <ActionIcon
+          pos="absolute"
+          variant="filled"
+          color="green"
+          top={-20}
+          right={-12}
+          onClick={() => {
+            onAnnounce(match.home.team, match.away.team);
+          }}
+          bd="none"
+          style={{ boxShadow: 'none' }}
+          size="xs"
+        >
+          <PlayIcon size={12} />
+        </ActionIcon>
+      )}
+    </Card>
+  );
+};