website refactor

apps/website/components/leagues/LeagueLogo.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { SafeImage } from '@/components/shared/SafeImage';
+import { Trophy } from 'lucide-react';
+import { Icon } from '@/ui/Icon';
+
+export interface LeagueLogoProps {
+  leagueId?: string;
+  src?: string;
+  alt: string;
+  size?: number;
+  className?: string;
+  border?: boolean;
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+export function LeagueLogo({ 
+  leagueId, 
+  src, 
+  alt, 
+  size = 64, 
+  className = '',
+  border = true,
+  rounded = 'md',
+}: LeagueLogoProps) {
+  const logoSrc = src || (leagueId ? `/api/media/leagues/${leagueId}/logo` : undefined);
+
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      rounded={rounded}
+      overflow="hidden"
+      bg="bg-charcoal-outline/10"
+      border={border}
+      borderColor="border-charcoal-outline/50"
+      className={className}
+      style={{ width: size, height: size, flexShrink: 0 }}
+    >
+      {logoSrc ? (
+        <SafeImage
+          src={logoSrc}
+          alt={alt}
+          className="w-full h-full object-contain p-1"
+          fallbackComponent={<Icon icon={Trophy} size={size > 32 ? 5 : 4} color="text-gray-500" />}
+        />
+      ) : (
+        <Icon icon={Trophy} size={size > 32 ? 5 : 4} color="text-gray-500" />
+      )}
+    </Box>
+  );
+}