upload

frontend/src/components/home/TeamScroller.tsx

@@ -0,0 +1,26 @@
+import { Box, Heading, HStack, VStack, Image, Text, useColorModeValue } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { getPlayers, Player } from '../../services/players';
+
+const TeamScroller: React.FC = () => {
+  const { data } = useQuery({ queryKey: ['players'], queryFn: getPlayers });
+  const players = (data || []).filter(p => p.is_active);
+  if (!players.length) return null;
+
+  return (
+    <Box>
+      <Heading size="lg" mb={4} textAlign="center">Náš tým</Heading>
+      <HStack spacing={6} overflowX="auto" py={2} className="hide-scrollbar">
+        {players.map((p: Player) => (
+          <VStack key={p.id} minW="160px" spacing={2} bg={useColorModeValue('white', 'gray.800')} borderRadius="xl" p={4} boxShadow="sm" borderWidth="1px" borderColor={useColorModeValue('gray.200', 'gray.700')}>
+            <Image src={p.image_url || '/logo192.png'} alt={p.first_name + ' ' + p.last_name} w="140px" h="140px" objectFit="cover" borderRadius="lg" />
+            <Text fontWeight="bold" textAlign="center">{p.first_name} {p.last_name}</Text>
+            <Text fontSize="sm" color={useColorModeValue('gray.600', 'gray.400')}>{p.position}</Text>
+          </VStack>
+        ))}
+      </HStack>
+    </Box>
+  );
+};
+
+export default TeamScroller;