Label.tsx

import { Icon, Tag } from 'antd';
import React, { FC, useEffect, useMemo, useState } from 'react';
import styles from './Label.module.scss';
import {
  LabelProps,
  IconLeftProps,
  IconRightProps,
  IconTagProps,
  CheckLabelProps,
  CrossLabelProps,
} from './interfaces';

let className;

const BaseLabel: FC<LabelProps> = (props) => {
  const [values, changeValues] = useState(
    props || {
      color: 'default',
      textLabel: 'Label',
      backgroundColor: 'rgba(1,113,211,0.05)',
      opacity: 1,
      size: 'default',
    }
  );
  useEffect(() => {
    changeValues(props);
  }, [props]);
  const { color, textLabel, opacity, backgroundColor, size } = values;
  console.log(backgroundColor);

  className = `ant-label-${size}`;
  const style = [styles.label, className, styles.position].join(' ');
  const labelStyle = { color, opacity, backgroundColor };
  return (
    <Tag style={labelStyle} className={style}>
      {textLabel}
    </Tag>
  );
};

const IconLeft: FC<IconLeftProps> = (props) => {
  return (
    <>
      <Icon className={styles.icon} type={props.iconType} />
      {props.textLabel}
    </>
  );
};
const IconRight: FC<IconRightProps> = (props) => {
  return (
    <>
      {props.textLabel}
      <Icon className={styles.icon} type={props.iconType} />
    </>
  );
};
const IconTag: FC<IconTagProps> = (props) => {
  if (props.position === 'left') {
    return <IconLeft {...props} />;
  } else {
    return <IconRight {...props} />;
  }
};
const CheckLabel: FC<CheckLabelProps> = (props) => {
  const {
    color,
    textLabel,
    opacity,
    backgroundColor,
    size,
    iconPosition,
  } = props;
  className = `ant-label-${size}`;
  const style = [styles.label, className, styles.position].join(' ');
  const labelStyle = { color, opacity, backgroundColor };
  const [text, changeText] = useState(textLabel);
  useEffect(() => changeText(textLabel), [textLabel]);
  return (
    <Tag style={labelStyle} className={style}>
      <IconTag {...props} />
    </Tag>
  );
};
const CrossLabel: FC<CrossLabelProps> = (props) => {
  const {
    color,
    textLabel,
    opacity,
    backgroundColor,
    size,
    iconPosition,
  } = props;
  className = `ant-label-${size}`;
  const style = [styles.label, className, styles.position].join(' ');
  const labelStyle = { color, opacity, backgroundColor };
  const [text, changeText] = useState(textLabel);
  useEffect(() => changeText(textLabel));

  return (
    <Tag style={labelStyle} className={style}>
      <IconTag {...props} />
    </Tag>
  );
};

const Label = {
  BaseLabel,
  CheckLabel,
  CrossLabel,
};

export default Label;