53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import { Box } from '@/ui/Box';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Image } from '@/ui/Image';
|
|
import { Building2 } from 'lucide-react';
|
|
|
|
export interface SponsorLogoProps {
|
|
sponsorId?: string;
|
|
src?: string;
|
|
alt: string;
|
|
size?: number;
|
|
className?: string;
|
|
border?: boolean;
|
|
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
}
|
|
|
|
export function SponsorLogo({
|
|
sponsorId,
|
|
src,
|
|
alt,
|
|
size = 48,
|
|
className = '',
|
|
border = true,
|
|
rounded = 'md',
|
|
}: SponsorLogoProps) {
|
|
const logoSrc = src || (sponsorId ? `/media/sponsors/${sponsorId}/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 ? (
|
|
<Image
|
|
src={logoSrc}
|
|
alt={alt}
|
|
className="w-full h-full object-contain p-1"
|
|
fallbackSrc="/default-sponsor-logo.png"
|
|
/>
|
|
) : (
|
|
<Icon icon={Building2} size={size > 32 ? 5 : 4} color="text-gray-500" />
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|