dev day #79

frontend/src/pages/PlayersPage.tsx

@@ -1,12 +1,12 @@
-import { Box, Container, Heading, Image, SimpleGrid, Spinner, Stack, Text, VStack, useColorModeValue } from '@chakra-ui/react';
+import { Box, Container, Heading, HStack, Image, SimpleGrid, Spinner, Stack, Text, VStack, useColorModeValue, Badge } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { getPlayers } from '../services/public';
 import type { Player } from '../services/public';
 import { assetUrl } from '../utils/url';
 import { Link as RouterLink } from 'react-router-dom';
 import MainLayout from '../components/layout/MainLayout';
-import SponsorsSection from '../components/common/SponsorsSection';
 import NewsletterCTA from '../components/common/NewsletterCTA';
+import { translateNationality, getCountryFlag } from '../utils/nationality';
 
 const PlayersPage: React.FC = () => {
   const { data, isLoading, isError } = useQuery<Player[]>({ queryKey: ['players'], queryFn: getPlayers });
@@ -55,18 +55,25 @@ const PlayersPage: React.FC = () => {
                   transition="all 0.2s ease"
                   spacing={3}
                 >
-                  <Image 
-                    src={assetUrl(p.image_url) || '/logo512.png'} 
-                    alt={`${p.first_name} ${p.last_name}`} 
-                    objectFit="cover" 
-                    borderRadius="md"
-                    w="100%"
-                    h="240px"
-                  />
+                  <Box position="relative" borderRadius="md" overflow="hidden">
+                    <Image 
+                      src={assetUrl(p.image_url) || '/logo512.png'} 
+                      alt={`${p.first_name} ${p.last_name}`} 
+                      objectFit="cover" 
+                      w="100%"
+                      h="240px"
+                    />
+                    {typeof p.jersey_number === 'number' && (
+                      <Badge position="absolute" top="10px" left="10px" colorScheme="blue" fontSize="0.85rem" px={3} py={1} borderRadius="md" boxShadow="sm">#{p.jersey_number}</Badge>
+                    )}
+                  </Box>
                   <Text fontWeight="bold" fontSize="lg">{p.first_name} {p.last_name}</Text>
                   <Text color={textSecondary}>{p.position}</Text>
-                  {p.jersey_number ? (
-                    <Text color="brand.primary" fontWeight="600">#{p.jersey_number}</Text>
+                  {p.nationality ? (
+                    <HStack spacing={2} color={textSecondary}>
+                      <Text as="span" fontSize="lg">{getCountryFlag(p.nationality)}</Text>
+                      <Text>{translateNationality(p.nationality)}</Text>
+                    </HStack>
                   ) : null}
                 </Stack>
               ))}
@@ -76,9 +83,6 @@ const PlayersPage: React.FC = () => {
         
         {/* Newsletter CTA */}
         <NewsletterCTA />
-        
-        {/* Sponsors Section */}
-        <SponsorsSection />
       </Box>
     </MainLayout>
   );