jiti-meet/react/features/base/label/components/web/Label.tsx

112 lines
2.4 KiB
TypeScript
Raw Normal View History

2022-09-13 07:36:00 +00:00
import { Theme } from '@mui/material';
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import Icon from '../../../icons/components/Icon';
import { withPixelLineHeight } from '../../../styles/functions.web';
import { COLORS } from '../../constants';
interface Props {
/**
* Own CSS class name.
*/
className?: string;
/**
* The color of the label.
*/
color?: string;
/**
* An SVG icon to be rendered as the content of the label.
*/
icon?: Function;
/**
* Color for the icon.
*/
iconColor?: string;
/**
* HTML ID attribute to add to the root of {@code Label}.
*/
id?: string;
/**
* Click handler if any.
*/
onClick?: (e?: React.MouseEvent) => void;
/**
* String or component that will be rendered as the label itself.
*/
text?: string;
}
const useStyles = makeStyles()((theme: Theme) => {
return {
label: {
...withPixelLineHeight(theme.typography.labelRegular),
alignItems: 'center',
background: theme.palette.ui04,
2022-09-13 07:36:00 +00:00
borderRadius: Number(theme.shape.borderRadius) / 2,
color: theme.palette.text01,
display: 'flex',
height: 28,
margin: '0 0 4px 4px',
padding: '0 8px'
},
withIcon: {
marginLeft: 8
},
clickable: {
cursor: 'pointer'
},
[COLORS.white]: {
background: theme.palette.text01,
color: theme.palette.ui04,
'& svg': {
fill: theme.palette.ui04
}
},
[COLORS.green]: {
background: theme.palette.success02
},
[COLORS.red]: {
background: theme.palette.actionDanger
}
};
});
const Label = ({
className,
color,
icon,
iconColor,
id,
onClick,
text
}: Props) => {
const { classes, cx } = useStyles();
return (
<div
className = { cx(classes.label, onClick && classes.clickable,
color && classes[color], className
) }
id = { id }
onClick = { onClick }>
{icon && <Icon
color = { iconColor }
size = '16'
src = { icon } />}
{text && <span className = { icon && classes.withIcon }>{text}</span>}
</div>
);
};
export default Label;