website refactor

apps/website/components/leagues/LeagueCover.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { SafeImage } from '@/components/shared/SafeImage';
+import { ImagePlaceholder } from '@/ui/ImagePlaceholder';
+
+export interface LeagueCoverProps {
+  leagueId?: string;
+  src?: string;
+  alt: string;
+  height?: string;
+  aspectRatio?: string;
+  className?: string;
+}
+
+export function LeagueCover({ 
+  leagueId, 
+  src, 
+  alt, 
+  height, 
+  aspectRatio = '21/9',
+  className = '',
+}: LeagueCoverProps) {
+  const coverSrc = src || (leagueId ? `/api/media/leagues/${leagueId}/cover` : undefined);
+
+  return (
+    <Box
+      width="full"
+      overflow="hidden"
+      bg="bg-charcoal-outline/10"
+      className={className}
+      style={{ height, aspectRatio: height ? undefined : aspectRatio }}
+    >
+      {coverSrc ? (
+        <SafeImage
+          src={coverSrc}
+          alt={alt}
+          className="w-full h-full object-cover"
+          fallbackComponent={<ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />}
+        />
+      ) : (
+        <ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
+      )}
+    </Box>
+  );
+}