64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Surface } from './Surface';
|
|
import { Image } from './Image';
|
|
import { Icon } from './Icon';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
export interface LogoProps {
|
|
src?: string;
|
|
alt: string;
|
|
size?: number | string;
|
|
icon?: LucideIcon;
|
|
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
variant?: 'default' | 'dark' | 'muted' | 'glass';
|
|
border?: boolean;
|
|
}
|
|
|
|
export const Logo = ({
|
|
src,
|
|
alt,
|
|
size = 48,
|
|
icon,
|
|
rounded = 'md',
|
|
variant = 'muted',
|
|
border = true,
|
|
}: LogoProps) => {
|
|
const finalSize = typeof size === 'number' ? `${size}px` : size;
|
|
|
|
return (
|
|
<Surface
|
|
variant={variant}
|
|
rounded={rounded}
|
|
border={border}
|
|
style={{
|
|
width: finalSize,
|
|
height: finalSize,
|
|
minWidth: finalSize,
|
|
minHeight: finalSize,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
overflow: 'hidden',
|
|
flexShrink: 0,
|
|
position: 'relative',
|
|
backgroundColor: 'var(--ui-color-bg-base)',
|
|
}}
|
|
>
|
|
{src ? (
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
objectFit: 'cover',
|
|
}}
|
|
/>
|
|
) : icon ? (
|
|
<Icon icon={icon} size={typeof size === 'number' ? (size > 32 ? 6 : 4) : 6} intent="low" />
|
|
) : null}
|
|
</Surface>
|
|
);
|
|
};
|