website refactor

apps/website/components/media/MediaCard.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Image } from '@/ui/Image';
+import { ImagePlaceholder } from '@/ui/ImagePlaceholder';
+
+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 (
+    <Box
+      as={motion.div}
+      whileHover={{ y: -4 }}
+      transition={{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }} // Fast ease-out
+      h="full"
+    >
+      <Box
+        display="flex"
+        flexDirection="col"
+        bg="bg-charcoal/40"
+        border
+        borderColor="border-charcoal-outline/30"
+        rounded="lg"
+        overflow="hidden"
+        cursor={onClick ? 'pointer' : 'default'}
+        onClick={onClick}
+        group
+        h="full"
+      >
+        <Box position="relative" width="full" aspectRatio={aspectRatio}>
+          {isLoading ? (
+            <ImagePlaceholder variant="loading" aspectRatio={aspectRatio} rounded="none" />
+          ) : error ? (
+            <ImagePlaceholder variant="error" message={error} aspectRatio={aspectRatio} rounded="none" />
+          ) : src ? (
+            <Box w="full" h="full" overflow="hidden">
+              <Image
+                src={src}
+                alt={alt}
+                objectFit="cover"
+                fullWidth
+                fullHeight
+              />
+            </Box>
+          ) : (
+            <ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
+          )}
+          
+          {actions && (
+            <Box
+              position="absolute"
+              top="2"
+              right="2"
+              display="flex"
+              gap={2}
+              opacity={0}
+              groupHoverOpacity={1}
+              transition
+            >
+              {actions}
+            </Box>
+          )}
+        </Box>
+
+        {(title || subtitle) && (
+          <Box p={3} borderTop borderColor="border-charcoal-outline/20">
+            {title && (
+              <Text block size="sm" weight="semibold" truncate color="text-white">
+                {title}
+              </Text>
+            )}
+            {subtitle && (
+              <Text block size="xs" color="text-gray-400" truncate mt={0.5}>
+                {subtitle}
+              </Text>
+            )}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+}