dev day #79

frontend/src/components/home/TeamScroller.tsx

@@ -2,6 +2,7 @@ import { Box, Heading, HStack, VStack, Image, Text, useColorModeValue } from '@c
 import { useQuery } from '@tanstack/react-query';
 import { getPlayers, Player } from '../../services/players';
 import { assetUrl } from '../../utils/url';
+import { getCountryFlag, translateNationality } from '../../utils/nationality';
 
 const TeamScroller: React.FC = () => {
   const { data } = useQuery({ queryKey: ['players'], queryFn: getPlayers });
@@ -17,6 +18,12 @@ const TeamScroller: React.FC = () => {
             <Image src={assetUrl(p.image_url) || '/logo192.png'} alt={p.first_name + ' ' + p.last_name} w="140px" h="140px" objectFit="cover" borderRadius="lg" fallbackSrc="/dist/img/logo-club-empty.svg" />
             <Text fontWeight="bold" textAlign="center">{p.first_name} {p.last_name}</Text>
             <Text fontSize="sm" color={useColorModeValue('gray.600', 'gray.400')}>{p.position}</Text>
+            {p.nationality ? (
+              <HStack spacing={2}>
+                <Text as="span" fontSize="lg">{getCountryFlag(p.nationality)}</Text>
+                <Text fontSize="sm" color={useColorModeValue('gray.600', 'gray.400')}>{translateNationality(p.nationality)}</Text>
+              </HStack>
+            ) : null}
             {p.date_of_birth ? (
               <Text fontSize="sm" color={useColorModeValue('gray.600', 'gray.400')}>
                 Věk: {(() => { const a = calculateAge(p.date_of_birth); return a != null ? `${a} ${czYears(a)}` : '' })()}