dev day #79

frontend/src/pages/PlayerDetailPage.tsx

@@ -3,15 +3,16 @@ import { useParams, Link as RouterLink } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { getPlayer } from '../services/public';
 import { assetUrl } from '../utils/url';
-import { Box, Badge, Button, Container, Divider, Heading, HStack, Image, SimpleGrid, Skeleton, Stack, Text, VStack } from '@chakra-ui/react';
+import { Box, Badge, Button, Container, Divider, Heading, HStack, Image, SimpleGrid, Skeleton, Stack, Text, VStack, useColorModeValue } from '@chakra-ui/react';
 import MainLayout from '../components/layout/MainLayout';
-import SponsorsSection from '../components/common/SponsorsSection';
 import NewsletterCTA from '../components/common/NewsletterCTA';
-import { translateNationality } from '../utils/nationality';
+import { translateNationality, getCountryFlag } from '../utils/nationality';
 
 const PlayerDetailPage: React.FC = () => {
   const { id } = useParams<{ id: string }>();
   const { data, isLoading, isError } = useQuery({ queryKey: ['player', id], queryFn: () => getPlayer(String(id)) });
+  const cardBg = useColorModeValue('white', 'gray.800');
+  const borderColor = useColorModeValue('gray.200', 'gray.700');
 
   if (isLoading) {
     return (
@@ -45,6 +46,12 @@ const PlayerDetailPage: React.FC = () => {
             <HStack justify="space-between">
               <HStack spacing={3}>
                 <Heading as="h1" size={{ base: 'xl', md: '2xl' }}>{fullName}</Heading>
+                {typeof data.jersey_number === 'number' && (
+                  <Badge colorScheme="blue" fontSize="md" px={3} py={1}>#{data.jersey_number}</Badge>
+                )}
+                {data.position && (
+                  <Badge variant="subtle" colorScheme="purple" fontSize="md" px={3} py={1}>{data.position}</Badge>
+                )}
                 {!data.is_active && (
                   <Badge colorScheme="gray" fontSize="md" px={3} py={1}>Neaktivní</Badge>
                 )}
@@ -63,7 +70,7 @@ const PlayerDetailPage: React.FC = () => {
                   h={{ base: '300px', md: '400px' }}
                 />
               </Box>
-              <Stack spacing={3} bg="white" borderWidth="1px" borderRadius="lg" p={6} shadow="sm">
+              <Stack spacing={3} bg={cardBg} borderWidth="1px" borderColor={borderColor} borderRadius="lg" p={6} shadow="sm">
                 <Heading size="md" mb={2}>Informace o hráči</Heading>
                 {data.position && (
                   <Text><b>Pozice:</b> {data.position}</Text>
@@ -72,11 +79,25 @@ const PlayerDetailPage: React.FC = () => {
                   <Text><b>Číslo dresu:</b> <Text as="span" color="brand.primary" fontWeight="700">#{data.jersey_number}</Text></Text>
                 )}
                 {data.nationality && (
-                  <Text><b>Národnost:</b> {translateNationality(data.nationality)}</Text>
+                  <HStack>
+                    <Text><b>Národnost:</b></Text>
+                    <Text as="span" fontSize="xl">{getCountryFlag(data.nationality)}</Text>
+                    <Text>{translateNationality(data.nationality)}</Text>
+                    {data.date_of_birth ? (
+                      <Text color={useColorModeValue('gray.600', 'gray.400')}>
+                        — {(() => { const a = calculateAge(data.date_of_birth); return a != null ? `${a} ${czYears(a)}` : ''; })()}
+                      </Text>
+                    ) : null}
+                  </HStack>
                 )}
                 {data.date_of_birth && (
                   <Text><b>Datum narození:</b> {new Date(data.date_of_birth).toLocaleDateString('cs-CZ')} — {(() => { const a = calculateAge(data.date_of_birth); return a != null ? `${a} ${czYears(a)}` : '' })()}</Text>
                 )}
+                {data.team?.name ? (
+                  <Text><b>Tým:</b> {data.team.name}</Text>
+                ) : (typeof data.team_id === 'number' && data.team_id > 0) ? (
+                  <Text><b>Tým ID:</b> {data.team_id}</Text>
+                ) : null}
                 {(data.height || data.weight) && (
                   <Text>
                     <b>Výška/Váha:</b> {data.height ? `${data.height} cm` : '-'} / {data.weight ? `${data.weight} kg` : '-'}
@@ -88,18 +109,12 @@ const PlayerDetailPage: React.FC = () => {
                 {data.phone && (
                   <Text><b>Telefon:</b> <a href={`tel:${normalizeTel(data.phone)}`}>{data.phone}</a></Text>
                 )}
-                {typeof data.team_id === 'number' && data.team_id > 0 && (
-                  <Text><b>Tým ID:</b> {data.team_id}</Text>
-                )}
               </Stack>
             </SimpleGrid>
 
           </VStack>
         </Container>
-        
         <NewsletterCTA />
-        
-        <SponsorsSection />
       </Box>
     </MainLayout>
   );