website refactor

apps/website/ui/LeagueLogo.tsx

@@ -1,22 +1,53 @@
-
-
+import React from 'react';
+import { Box } from './Box';
 import { Image } from './Image';
+import { Trophy } from 'lucide-react';
+import { Icon } from './Icon';
 
 export interface LeagueLogoProps {
-  leagueId: string;
+  leagueId?: string;
+  src?: string;
   alt: string;
   size?: number;
+  className?: string;
+  border?: boolean;
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 }
 
-export function LeagueLogo({ leagueId, alt, size = 100 }: LeagueLogoProps) {
+export function LeagueLogo({ 
+  leagueId, 
+  src, 
+  alt, 
+  size = 64, 
+  className = '',
+  border = true,
+  rounded = 'md',
+}: LeagueLogoProps) {
+  const logoSrc = src || (leagueId ? `/media/leagues/${leagueId}/logo` : undefined);
+
   return (
-    <Image
-      src={`/media/leagues/${leagueId}/logo`}
-      alt={alt}
-      width={size}
-      height={size}
-      style={{ objectFit: 'contain' }}
-      fallbackSrc="/default-league-logo.png"
-    />
+    <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 ? (
+        <Image
+          src={logoSrc}
+          alt={alt}
+          className="w-full h-full object-contain p-1"
+          fallbackSrc="/default-league-logo.png"
+        />
+      ) : (
+        <Icon icon={Trophy} size={size > 32 ? 5 : 4} color="text-gray-500" />
+      )}
+    </Box>
   );
 }