upload

2026-06-05 11:12:56 +00:00 · 2025-10-16 13:32:05 +02:00
commit 12cba639b9
663 changed files with 168914 additions and 0 deletions
@@ -0,0 +1,108 @@
+import React from 'react';
+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 MainLayout from '../components/layout/MainLayout';
+import SponsorsSection from '../components/common/SponsorsSection';
+import NewsletterCTA from '../components/common/NewsletterCTA';
+import { translateNationality } from '../utils/nationality';
+
+const PlayerDetailPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const { data, isLoading, isError } = useQuery({ queryKey: ['player', id], queryFn: () => getPlayer(String(id)) });
+
+  if (isLoading) {
+    return (
+      <MainLayout>
+        <Container maxW="7xl" py={8}>
+          <Skeleton height="320px" />
+        </Container>
+      </MainLayout>
+    );
+  }
+
+  if (isError || !data) {
+    return (
+      <MainLayout>
+        <Container maxW="7xl" py={8}>
+          <Text color="red.500">Hráče se nepodařilo načíst.</Text>
+        </Container>
+      </MainLayout>
+    );
+  }
+
+  const fullName = [data.first_name, data.last_name].filter(Boolean).join(' ');
+
+  return (
+    <MainLayout>
+      <Box>
+        <Container maxW="7xl" py={{ base: 6, md: 10 }}>
+          <VStack align="stretch" spacing={6}>
+            <HStack justify="space-between">
+              <HStack spacing={3}>
+                <Heading as="h1" size={{ base: 'xl', md: '2xl' }}>{fullName}</Heading>
+                {!data.is_active && (
+                  <Badge colorScheme="gray" fontSize="md" px={3} py={1}>Neaktivní</Badge>
+                )}
+              </HStack>
+              <Button as={RouterLink} to="/hraci" variant="outline">Zpět na přehled</Button>
+            </HStack>
+
+            <SimpleGrid columns={{ base: 1, md: 2 }} spacing={6}>
+              <Box>
+                <Image
+                  src={assetUrl(data.image_url) || '/logo512.png'}
+                  alt={fullName}
+                  borderRadius="lg"
+                  objectFit="cover"
+                  w="100%"
+                  h={{ base: '300px', md: '400px' }}
+                />
+              </Box>
+              <Stack spacing={3} bg="white" borderWidth="1px" 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>
+                )}
+                {typeof data.jersey_number === 'number' && (
+                  <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>
+                )}
+                {data.date_of_birth && (
+                  <Text><b>Datum narození:</b> {new Date(data.date_of_birth).toLocaleDateString('cs-CZ')}</Text>
+                )}
+                {(data.height || data.weight) && (
+                  <Text>
+                    <b>Výška/Váha:</b> {data.height ? `${data.height} cm` : '-'} / {data.weight ? `${data.weight} kg` : '-'}
+                  </Text>
+                )}
+                {data.email && (
+                  <Text><b>Email:</b> {data.email}</Text>
+                )}
+                {data.phone && (
+                  <Text><b>Telefon:</b> {data.phone}</Text>
+                )}
+                {typeof data.team_id === 'number' && data.team_id > 0 && (
+                  <Text><b>Tým ID:</b> {data.team_id}</Text>
+                )}
+              </Stack>
+            </SimpleGrid>
+
+          </VStack>
+        </Container>
+        
+        {/* Newsletter CTA */}
+        <NewsletterCTA />
+        
+        {/* Sponsors Section */}
+        <SponsorsSection />
+      </Box>
+    </MainLayout>
+  );
+};
+
+export default PlayerDetailPage;