mirror of
https://github.com/SomboChea/ui
synced 2024-05-10 05:21:36 +07:00
55 lines
1.2 KiB
TypeScript
55 lines
1.2 KiB
TypeScript
import styled, { css } from 'react-emotion';
|
|
import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
|
|
import { StyledOtherComponent } from 'create-emotion-styled';
|
|
import { DetailedHTMLProps, HTMLAttributes } from 'react';
|
|
|
|
const getSize = (size: Breakpoint): string => {
|
|
switch (size) {
|
|
case 'md':
|
|
return `
|
|
width: 18px;
|
|
height: 18px;
|
|
`;
|
|
default:
|
|
return `
|
|
width: 14px;
|
|
height: 16px;
|
|
`;
|
|
}
|
|
};
|
|
|
|
const commonStyle = ({ size = 'sm' as Breakpoint, pointer, modifiers = null }): string => css`
|
|
&& {
|
|
display: inline-block;
|
|
cursor: ${pointer ? 'pointer' : 'Developers'};
|
|
${getSize(size)};
|
|
${modifiers && modifiers};
|
|
}
|
|
`;
|
|
|
|
export const Svg = styled('svg')`
|
|
${commonStyle};
|
|
box-sizing: initial;
|
|
`;
|
|
|
|
export const ImgWrapper: StyledOtherComponent<
|
|
{
|
|
size?: Breakpoint;
|
|
pointer: boolean;
|
|
modifiers?: null | undefined;
|
|
name?: string | unknown;
|
|
},
|
|
DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
|
|
{}
|
|
> = styled('span')`
|
|
${commonStyle};
|
|
box-sizing: initial;
|
|
`;
|
|
|
|
export const Img = styled('img')({
|
|
'&&': {
|
|
width: '100%',
|
|
height: 'auto',
|
|
},
|
|
});
|