hiuphub-gamified/src/components/Common/TipBox.js

app of gamified

import React from "react";

export default function TipBox(props) {
  const { tipBoxType, onClose } = props;

  let messages = [props.message];

  if (Array.isArray(props.message)) {
    messages = props.message.map(message => `${message}`);
  } else if (typeof props.message === "object") {
    messages = Object.keys(props.message).map(
      key => `${key}: ${props.message[key]}`
    );
  }

  return (
    <div
      style={{
        fontSize: "16px",
        color: "white",
        padding: "8px",
        background: tipBoxType === "success" ? "green" : "red",
        width: "350px",
        border: `solid 1px ${tipBoxType === "success" ? "green" : "red"}`,
        borderRadius: "4px",
        position: "fixed",
        top: "80px",
        right: "20px",
        fontFamily: "arial,serif",
        lineHeight: "20px",
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <span style={{ display: "flex", flex: "1" }}>{messages}</span>
        <button
          style={{ display: "flex", flex: "0 1 auto" }}
          type="button"
          className="btn-close"
          aria-label="Close"
          onClick={onClose}
        ></button>
      </div>
    </div>
  );
}