@shakthillc/components/src/UserSelector/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 style={{color:color === "#FFD4D1" ?"#FF6B61":"#1E2B36"}}className={style.text}>{text}</p>
      <span
      style={{cursor:"pointer"}}
        onClick={() => closeBadge(text)}
        onMouseOver={hoverBadge}
        onMouseOut={leaveBadge}
      >
        <Icon style={{fontSize:12,lineHeight:1.5,margin:"0px 8px"}}>close</Icon>
      </span>
    </div>
  );
};

export default Badge;