46 lines
1.0 KiB
TypeScript
46 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Image } from './Image';
|
|
import { ImagePlaceholder } from './ImagePlaceholder';
|
|
|
|
export interface LeagueCoverProps {
|
|
leagueId?: string;
|
|
src?: string;
|
|
alt: string;
|
|
height?: string;
|
|
aspectRatio?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function LeagueCover({
|
|
leagueId,
|
|
src,
|
|
alt,
|
|
height,
|
|
aspectRatio = '21/9',
|
|
className = '',
|
|
}: LeagueCoverProps) {
|
|
const coverSrc = src || (leagueId ? `/media/leagues/${leagueId}/cover` : undefined);
|
|
|
|
return (
|
|
<Box
|
|
width="full"
|
|
overflow="hidden"
|
|
bg="bg-charcoal-outline/10"
|
|
className={className}
|
|
style={{ height, aspectRatio: height ? undefined : aspectRatio }}
|
|
>
|
|
{coverSrc ? (
|
|
<Image
|
|
src={coverSrc}
|
|
alt={alt}
|
|
className="w-full h-full object-cover"
|
|
fallbackSrc="/default-league-cover.png"
|
|
/>
|
|
) : (
|
|
<ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|