more spotify, tts

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

@@ -1,5 +1,5 @@
 import { ActionIcon, Card, Flex, Text, Stack, Indicator } from "@mantine/core";
-import { PlayIcon, PencilIcon } from "@phosphor-icons/react";
+import { PlayIcon, PencilIcon, SpeakerHighIcon } from "@phosphor-icons/react";
 import React, { useCallback, useMemo } from "react";
 import { MatchSlot } from "./match-slot";
 import { Match } from "@/features/matches/types";
@@ -91,6 +91,31 @@ export const MatchCard: React.FC<MatchCardProps> = ({
     [match.id, editSheet]
   );
 
+  const handleSpeakerClick = useCallback(() => {
+    if ('speechSynthesis' in window && match.home?.name && match.away?.name) {
+      const utterance = new SpeechSynthesisUtterance(
+        `${match.home.name} vs. ${match.away.name}`
+      );
+      
+      const voices = window.speechSynthesis.getVoices();
+      
+      const preferredVoice = voices.find(voice => 
+        voice.lang.startsWith('en') && 
+        voice.name.includes('Daniel')
+      ) || voices.find(voice => voice.lang.startsWith('en') && voice.default);
+      
+      if (preferredVoice) {
+        utterance.voice = preferredVoice;
+      }
+      
+      utterance.rate = 0.9;
+      utterance.volume = 0.8;
+      utterance.pitch = 1.0;
+      
+      window.speechSynthesis.speak(utterance);
+    }
+  }, [match.home?.name, match.away?.name]);
+
   return (
     <Flex direction="row" align="center" justify="end" gap={8}>
       <Text c="dimmed" fw="bolder">
@@ -131,6 +156,18 @@ export const MatchCard: React.FC<MatchCardProps> = ({
                 * If necessary
               </Text>
             )}
+
+            <ActionIcon
+              pos="absolute"
+              bottom={-2}
+              left={-26}
+              size="sm"
+              variant="subtle"
+              color="gray"
+              onClick={handleSpeakerClick}
+            >
+              <SpeakerHighIcon size={12} />
+            </ActionIcon>
           </Card>
         </Indicator>