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, 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 (
{icon && } {text && {text}}
); }; export default Label;