@shakthillc/components/src/MultiSelector/Badge.js

React generic components for shakthi products

import React, { useState } from "react";
import Icon from "@material-ui/core/Icon";
import style from "./Badge.module.css";

const Badge = ({ text, color, avatar, onClick }) => {
  const [chover, setChover] = useState(color);
  const hoverBadge = () => {
    setChover((color = "#ffcccb"));
  };
  const closeBadge = function (text) {
    onClick && onClick(text);
  };
  const leaveBadge = function () {
    setChover(color);
  };
  return (
    <div style={{ background: chover }} className={style.container}>
      <p className={style.text}>{text}</p>
      <span
        onClick={() => closeBadge(text)}
        onMouseOver={hoverBadge}
        onMouseOut={leaveBadge}
        className={style.close}
      >
        <Icon style={{ fontSize: "12px" }}>close</Icon>
      </span>
    </div>
  );
};

export default Badge;