dev day #80

frontend/src/pages/OverlaySponsorsPage.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Box, Center, Spinner, SimpleGrid, Image, useColorModeValue } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { listSponsorsPublic } from '@/services/scoreboard';
+const OverlaySponsorsPage: React.FC = () => {
+  const bg = useColorModeValue('transparent', 'transparent');
+  const { data, isLoading } = useQuery<string[]>({
+    queryKey: ['public-sponsors-list'],
+    queryFn: listSponsorsPublic,
+    refetchInterval: 10000,
+    staleTime: 5000,
+  });
+
+  return (
+    <Box minH="100vh" bg={bg} display="flex" alignItems="center" justifyContent="center" p={6}>
+      {isLoading ? (
+        <Center><Spinner /></Center>
+      ) : (
+        <SimpleGrid columns={{ base: 2, sm: 3, md: 4, lg: 5 }} spacing={{ base: 6, md: 10 }}>
+          {(data || []).map((src, i) => (
+            <Box key={`${src}-${i}`} p={3} bg="rgba(255,255,255,0.0)" borderRadius="md">
+              <Image src={src} alt={`sponsor-${i}`} maxH="64px" mx="auto" objectFit="contain"/>
+            </Box>
+          ))}
+        </SimpleGrid>
+      )}
+    </Box>
+  );
+};
+
+export default OverlaySponsorsPage;