website refactor

apps/website/ui/TrackImage.tsx

@@ -0,0 +1,31 @@
+/**
+ * TrackImage
+ *
+ * Pure UI component for displaying track images.
+ * Renders an optimized image with fallback on error.
+ */
+
+import React from 'react';
+import { Image } from './Image';
+
+export interface TrackImageProps {
+  trackId: string;
+  alt: string;
+  className?: string;
+}
+
+export function TrackImage({ trackId, alt, className = '' }: TrackImageProps) {
+  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';
+      }}
+    />
+  );
+}