website refactor

apps/website/components/races/TrackImage.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Image } from '@/ui/Image';
+import { ImagePlaceholder } from '@/ui/ImagePlaceholder';
+
+export interface TrackImageProps {
+  trackId?: string;
+  src?: string;
+  alt: string;
+  aspectRatio?: string;
+  className?: string;
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+}
+
+export function TrackImage({ 
+  trackId, 
+  src, 
+  alt, 
+  aspectRatio = '16/9',
+  className = '',
+  rounded = 'lg',
+}: TrackImageProps) {
+  const imageSrc = src || (trackId ? `/media/tracks/${trackId}/image` : undefined);
+
+  return (
+    <Box
+      width="full"
+      overflow="hidden"
+      bg="bg-charcoal-outline/10"
+      rounded={rounded}
+      className={className}
+      style={{ aspectRatio }}
+    >
+      {imageSrc ? (
+        <Image
+          src={imageSrc}
+          alt={alt}
+          className="w-full h-full object-cover"
+          fallbackSrc="/default-track-image.png"
+        />
+      ) : (
+        <ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
+      )}
+    </Box>
+  );
+}