54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Image } from './Image';
|
|
import { Users } from 'lucide-react';
|
|
import { Icon } from './Icon';
|
|
|
|
export interface TeamLogoProps {
|
|
teamId?: string;
|
|
src?: string;
|
|
alt: string;
|
|
size?: number;
|
|
className?: string;
|
|
border?: boolean;
|
|
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
}
|
|
|
|
export function TeamLogo({
|
|
teamId,
|
|
src,
|
|
alt,
|
|
size = 48,
|
|
className = '',
|
|
border = true,
|
|
rounded = 'md',
|
|
}: TeamLogoProps) {
|
|
const logoSrc = src || (teamId ? `/media/teams/${teamId}/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-team-logo.png"
|
|
/>
|
|
) : (
|
|
<Icon icon={Users} size={size > 32 ? 5 : 4} color="text-gray-500" />
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|