website refactor

apps/website/ui/MediaCard.tsx

@@ -0,0 +1,93 @@
+import { Card } from '@/ui/Card';
+import { Image } from '@/ui/Image';
+import { ImagePlaceholder } from '@/ui/ImagePlaceholder';
+import { Box } from '@/ui/primitives/Box';
+import { Text } from '@/ui/Text';
+import { motion } from 'framer-motion';
+import React from 'react';
+
+export interface MediaCardProps {
+  src?: string;
+  alt?: string;
+  title?: string;
+  subtitle?: string;
+  aspectRatio?: string;
+  isLoading?: boolean;
+  error?: string;
+  onClick?: () => void;
+  actions?: React.ReactNode;
+}
+
+export function MediaCard({
+  src,
+  alt = 'Media asset',
+  title,
+  subtitle,
+  aspectRatio = '16/9',
+  isLoading,
+  error,
+  onClick,
+  actions,
+}: MediaCardProps) {
+  return (
+    <motion.div
+      whileHover={{ y: -4 }}
+      transition={{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
+      style={{ height: '100%' }}
+    >
+      <Card
+        variant="dark"
+        onClick={onClick}
+        padding={0}
+        style={{ height: '100%', cursor: onClick ? 'pointer' : 'default', overflow: 'hidden' }}
+      >
+        <Box position="relative" fullWidth style={{ aspectRatio }}>
+          {isLoading ? (
+            <ImagePlaceholder variant="loading" aspectRatio={aspectRatio} />
+          ) : error ? (
+            <ImagePlaceholder variant="error" message={error} aspectRatio={aspectRatio} />
+          ) : src ? (
+            <Box fullWidth fullHeight style={{ overflow: 'hidden' }}>
+              <Image
+                src={src}
+                alt={alt}
+                objectFit="cover"
+              />
+            </Box>
+          ) : (
+            <ImagePlaceholder aspectRatio={aspectRatio} />
+          )}
+          
+          {actions && (
+            <Box
+              position="absolute"
+              top={2}
+              right={2}
+              display="flex"
+              gap={2}
+              style={{ opacity: 0, transition: 'opacity 0.2s' }}
+              className="group-hover:opacity-100"
+            >
+              {actions}
+            </Box>
+          )}
+        </Box>
+
+        {(title || subtitle) && (
+          <Box padding={3} style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}>
+            {title && (
+              <Text block size="sm" weight="bold" truncate variant="high">
+                {title}
+              </Text>
+            )}
+            {subtitle && (
+              <Text block size="xs" variant="low" truncate marginTop={0.5}>
+                {subtitle}
+              </Text>
+            )}
+          </Box>
+        )}
+      </Card>
+    </motion.div>
+  );
+}