website refactor

apps/website/ui/MediaPreviewCard.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { ImagePlaceholder } from './ImagePlaceholder';
+import { Image } from './Image';
+
+export interface MediaPreviewCardProps {
+  src?: string;
+  alt?: string;
+  title?: string;
+  subtitle?: string;
+  aspectRatio?: string;
+  isLoading?: boolean;
+  error?: string;
+  onClick?: () => void;
+  className?: string;
+  actions?: React.ReactNode;
+}
+
+export function MediaPreviewCard({
+  src,
+  alt = 'Media preview',
+  title,
+  subtitle,
+  aspectRatio = '16/9',
+  isLoading,
+  error,
+  onClick,
+  className = '',
+  actions,
+}: MediaPreviewCardProps) {
+  return (
+    <Box
+      display="flex"
+      flexDirection="col"
+      bg="bg-charcoal-outline/10"
+      border
+      borderColor="border-charcoal-outline/50"
+      rounded="lg"
+      overflow="hidden"
+      transition
+      hoverScale={!!onClick}
+      cursor={onClick ? 'pointer' : 'default'}
+      onClick={onClick}
+      className={`group ${className}`}
+    >
+      <Box position="relative" width="full" style={{ aspectRatio }}>
+        {isLoading ? (
+          <ImagePlaceholder variant="loading" aspectRatio={aspectRatio} rounded="none" />
+        ) : error ? (
+          <ImagePlaceholder variant="error" message={error} aspectRatio={aspectRatio} rounded="none" />
+        ) : src ? (
+          <Image
+            src={src}
+            alt={alt}
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
+        )}
+        
+        {actions && (
+          <Box
+            position="absolute"
+            top={2}
+            right={2}
+            display="flex"
+            gap={2}
+            opacity={0}
+            className="group-hover:opacity-100 transition-opacity"
+          >
+            {actions}
+          </Box>
+        )}
+      </Box>
+
+      {(title || subtitle) && (
+        <Box p={3} borderTop borderColor="border-charcoal-outline/30">
+          {title && (
+            <Text block size="sm" weight="semibold" truncate>
+              {title}
+            </Text>
+          )}
+          {subtitle && (
+            <Text block size="xs" color="text-gray-500" truncate mt={0.5}>
+              {subtitle}
+            </Text>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+}