website refactor

apps/website/ui/TrackImage.tsx

@@ -1,31 +1,46 @@
-/**
- * TrackImage
- *
- * Pure UI component for displaying track images.
- * Renders an optimized image with fallback on error.
- */
-
 import React from 'react';
+import { Box } from './Box';
 import { Image } from './Image';
+import { ImagePlaceholder } from './ImagePlaceholder';
 
 export interface TrackImageProps {
-  trackId: string;
+  trackId?: string;
+  src?: string;
   alt: string;
+  aspectRatio?: string;
   className?: string;
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
 
-export function TrackImage({ trackId, alt, className = '' }: TrackImageProps) {
+export function TrackImage({ 
+  trackId, 
+  src, 
+  alt, 
+  aspectRatio = '16/9',
+  className = '',
+  rounded = 'lg',
+}: TrackImageProps) {
+  const imageSrc = src || (trackId ? `/media/tracks/${trackId}/image` : undefined);
+
   return (
-    <Image
-      src={`/media/tracks/${trackId}/image`}
-      alt={alt}
-      width={800}
-      height={256}
-      className={`w-full h-64 object-cover ${className}`}
-      onError={(e) => {
-        // Fallback to default track image
-        (e.target as HTMLImageElement).src = '/default-track-image.png';
-      }}
-    />
+    <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>
   );
 }