artcraft/app/components/Button.tsx

import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";

export interface ButtonPropsI
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  icon?: IconDefinition;
  variant?: "primary" | "secondary";
}

export const Button = ({
  icon,
  children,
  className: propsClassName,
  variant: propsVariant = "primary",
  disabled,
  ...rest
}: ButtonPropsI) => {
  const variant = disabled ? 'disabled' : propsVariant;
  function getVariantClassNames(variant: string) {
    switch (variant) {
      case "disabled":{
        return "bg-brand-secondary-500 text-brand-secondary-300"
      }
      case "secondary": {
        return " bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary";
      }
      case "primary":
      default: {
        return " bg-brand-primary hover:bg-brand-primary-400 text-white focus-visible:outline-brand-primary-600";
      }
    }
  }

  const className = twMerge(
    "text-sm font-semibold rounded-md px-3 py-2 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-all duration-150",
    getVariantClassNames(variant),
    propsClassName,
  );

  return (
    <button className={className} disabled={disabled} {...rest}>
      {icon && <FontAwesomeIcon className="mr-2" icon={icon} />}
      {children}
    </button>
  );
};