94 lines
2.3 KiB
TypeScript
94 lines
2.3 KiB
TypeScript
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>
|
|
);
|
|
}
|