infisical/frontend/components/basic/buttons/Button.js

import React from "react";
import Image from "next/image";
import Link from "next/link";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

var classNames = require("classnames");

export default function Button({
  text,
  onButtonPressed,
  link,
  loading,
  color,
  size,
  icon,
  active = true,
  iconDisabled,
  textDisabled,
}) {
  let styleButton = classNames(
    "group m-auto md:m-0 inline-block rounded-md duration-200",

    // Setting background colors and hover modes
    color == "mineshaft" && active && "bg-mineshaft-700 hover:bg-primary",
    color == "mineshaft" && !active && "bg-mineshaft",
    (color == "primary" || !color) && active && "bg-primary hover:opacity-80",
    (color == "primary" || !color) && !active && "bg-primary",
    color == "red" && "bg-red",

    // Changing the opacity when active vs when not
    active ? "opacity-100 cursor-pointer" : "opacity-40",

    // Setting the button sizes
    size == "md" && "h-10 w-full px-2 md:px-4",
    size == "lg" && "h-12 w-full px-2 md:px-8",
    !size && "md:py-1 px-3 md:px-8",
    size == "icon-md" && "h-10 w-10 flex items-center justify-center",
    size == "icon-sm" && "h-9 w-9 flex items-center justify-center"
  );

  let styleMainDiv = classNames(
    "relative font-medium flex items-center",

    // Setting the text color for the text and icon
    color == "mineshaft" && "text-gray-400",
    color != "mineshaft" && color != "red" && "text-black",
    color == "red" && "text-gray-200",
    active && color != "red" ? "group-hover:text-black" : "",

    size == "icon" && "flex items-center justify-center"
  );

  let textStyle = classNames(
    "relative duration-200",

    // Show the loading sign if the loading indicator is on
    loading == true ? "opacity-0" : "opacity-100",
    size == "md" && "text-sm",
    size == "lg" && "text-lg"
  );

  const button = (
    <button
      disabled={!active}
      onClick={onButtonPressed}
      className={styleButton}
    >
      <div className={styleMainDiv}>
        <div
          className={`${
            loading == true ? "opacity-100" : "opacity-0"
          } absolute flex items-center px-2 duration-200`}
        >
          <Image
            src="/images/loading/loadingblack.gif"
            height={25}
            width={42}
            alt="loading animation"
            className={`rounded-xl`}
          ></Image>
        </div>
        {icon && (
          <FontAwesomeIcon
            icon={icon}
            className={`flex my-auto font-extrabold ${
              size == "icon-sm" ? "text-sm" : "text-md"
            } ${(text || textDisabled) && "mr-2"}`}
          />
        )}
        {iconDisabled && (
          <FontAwesomeIcon
            icon={iconDisabled}
            className={`flex my-auto font-extrabold ${
              size == "icon-sm" ? "text-sm" : "text-md"
            } ${(text || textDisabled) && "mr-2"}`}
          />
        )}
        {(text || textDisabled) && (
          <p className={textStyle}>{active ? text : textDisabled}</p>
        )}
      </div>
    </button>
  );

  if (link) {
    return <Link href={link}>{button}</Link>;
  }

  return button;
}