47 lines
1.0 KiB
TypeScript
47 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Image } from './Image';
|
|
import { ImagePlaceholder } from './ImagePlaceholder';
|
|
|
|
export interface TrackImageProps {
|
|
trackId?: string;
|
|
src?: string;
|
|
alt: string;
|
|
aspectRatio?: string;
|
|
className?: string;
|
|
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
}
|
|
|
|
export function TrackImage({
|
|
trackId,
|
|
src,
|
|
alt,
|
|
aspectRatio = '16/9',
|
|
className = '',
|
|
rounded = 'lg',
|
|
}: TrackImageProps) {
|
|
const imageSrc = src || (trackId ? `/media/tracks/${trackId}/image` : undefined);
|
|
|
|
return (
|
|
<Box
|
|
width="full"
|
|
overflow="hidden"
|
|
bg="bg-charcoal-outline/10"
|
|
rounded={rounded}
|
|
className={className}
|
|
style={{ aspectRatio }}
|
|
>
|
|
{imageSrc ? (
|
|
<Image
|
|
src={imageSrc}
|
|
alt={alt}
|
|
className="w-full h-full object-cover"
|
|
fallbackSrc="/default-track-image.png"
|
|
/>
|
|
) : (
|
|
<ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|