54 lines
1.2 KiB
TypeScript
54 lines
1.2 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) => {
|
|
return (
|
|
<Surface
|
|
variant={variant}
|
|
rounded={rounded}
|
|
border={border}
|
|
style={{
|
|
width: size,
|
|
height: size,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
overflow: 'hidden',
|
|
flexShrink: 0
|
|
}}
|
|
>
|
|
{src ? (
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
style={{ width: '100%', height: '100%', objectFit: 'contain', padding: '10%' }}
|
|
/>
|
|
) : icon ? (
|
|
<Icon icon={icon} size={typeof size === 'number' ? (size > 32 ? 5 : 4) : 5} intent="low" />
|
|
) : null}
|
|
</Surface>
|
|
);
|
|
};
|