54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { SafeImage } from '@/components/shared/SafeImage';
|
|
import { Trophy } from 'lucide-react';
|
|
import { Icon } from '@/ui/Icon';
|
|
|
|
export interface LeagueLogoProps {
|
|
leagueId?: string;
|
|
src?: string;
|
|
alt: string;
|
|
size?: number;
|
|
className?: string;
|
|
border?: boolean;
|
|
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
}
|
|
|
|
export function LeagueLogo({
|
|
leagueId,
|
|
src,
|
|
alt,
|
|
size = 64,
|
|
className = '',
|
|
border = true,
|
|
rounded = 'md',
|
|
}: LeagueLogoProps) {
|
|
const logoSrc = src || (leagueId ? `/api/media/leagues/${leagueId}/logo` : undefined);
|
|
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
rounded={rounded}
|
|
overflow="hidden"
|
|
bg="bg-charcoal-outline/10"
|
|
border={border}
|
|
borderColor="border-charcoal-outline/50"
|
|
className={className}
|
|
style={{ width: size, height: size, flexShrink: 0 }}
|
|
>
|
|
{logoSrc ? (
|
|
<SafeImage
|
|
src={logoSrc}
|
|
alt={alt}
|
|
className="w-full h-full object-contain p-1"
|
|
fallbackComponent={<Icon icon={Trophy} size={size > 32 ? 5 : 4} color="text-gray-500" />}
|
|
/>
|
|
) : (
|
|
<Icon icon={Trophy} size={size > 32 ? 5 : 4} color="text-gray-500" />
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|