website refactor

apps/website/ui/LeagueCover.tsx

@@ -1,20 +1,45 @@
-
-
+import React from 'react';
+import { Box } from './Box';
 import { Image } from './Image';
+import { ImagePlaceholder } from './ImagePlaceholder';
 
 export interface LeagueCoverProps {
-  leagueId: string;
+  leagueId?: string;
+  src?: string;
   alt: string;
   height?: string;
+  aspectRatio?: string;
+  className?: string;
 }
 
-export function LeagueCover({ leagueId, alt, height = '12rem' }: LeagueCoverProps) {
+export function LeagueCover({ 
+  leagueId, 
+  src, 
+  alt, 
+  height, 
+  aspectRatio = '21/9',
+  className = '',
+}: LeagueCoverProps) {
+  const coverSrc = src || (leagueId ? `/media/leagues/${leagueId}/cover` : undefined);
+
   return (
-    <Image
-      src={`/media/leagues/${leagueId}/cover`}
-      alt={alt}
-      style={{ width: '100%', height, objectFit: 'cover' }}
-      fallbackSrc="/default-league-cover.png"
-    />
+    <Box
+      width="full"
+      overflow="hidden"
+      bg="bg-charcoal-outline/10"
+      className={className}
+      style={{ height, aspectRatio: height ? undefined : aspectRatio }}
+    >
+      {coverSrc ? (
+        <Image
+          src={coverSrc}
+          alt={alt}
+          className="w-full h-full object-cover"
+          fallbackSrc="/default-league-cover.png"
+        />
+      ) : (
+        <ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
+      )}
+    </Box>
   );
 }