106 lines
2.6 KiB
TypeScript
106 lines
2.6 KiB
TypeScript
'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>
|
|
);
|
|
}
|