mirror of
https://github.com/SomboChea/ui
synced 2024-05-06 19:41:36 +07:00
53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { Theme } from '../../design-tokens/theme';
|
|
|
|
import defaultLogo from './img/logo.svg';
|
|
import blackAndWithLogo from './img/logo-black-and-white.svg';
|
|
|
|
export enum Size {
|
|
Small = '40px',
|
|
Big = '90px',
|
|
}
|
|
|
|
const logos = {
|
|
light: defaultLogo,
|
|
dark: blackAndWithLogo,
|
|
};
|
|
|
|
const logo = window.VERDACCIO_LOGO;
|
|
|
|
interface Props {
|
|
size?: Size;
|
|
}
|
|
|
|
const Logo: React.FC<Props> = ({ size = Size.Small }) => {
|
|
if (logo) {
|
|
return (
|
|
<ImageLogo>
|
|
<img alt="logo" height="40px" src={logo} />
|
|
</ImageLogo>
|
|
);
|
|
}
|
|
return <StyledLogo size={size} />;
|
|
};
|
|
|
|
export default Logo;
|
|
|
|
const ImageLogo = styled('div')({
|
|
fontSize: 0,
|
|
});
|
|
|
|
const StyledLogo = styled('div')<Props & { theme?: Theme }>(({ size, theme }) => ({
|
|
display: 'inline-block',
|
|
verticalAlign: 'middle',
|
|
boxSizing: 'border-box',
|
|
backgroundPosition: 'center',
|
|
backgroundSize: 'contain',
|
|
backgroundImage: `url(${logos[theme?.palette.type]})`,
|
|
backgroundRepeat: ' no-repeat',
|
|
width: size,
|
|
height: size,
|
|
}));
|