artcraft/app/components/Input.tsx

import React from "react";
import { twMerge } from "tailwind-merge";
import { IconDefinition } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Label, H6 } from "./Typography";
import { kebabCase } from "~/utilities";
import {
  disableHotkeyInput,
  enableHotkeyInput,
  DomLevels,
} from "~/pages/PageEnigma/store";

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  inputClassName ?: string,
  label?: string;
  icon?: IconDefinition;
  isError?: boolean;
  errorMessage?: string;
}

export const Input = React.forwardRef(({
    label, icon, inputClassName, className, id, isError, errorMessage, ...rest 
  } : InputProps,
    ref: React.ForwardedRef<HTMLInputElement>,
  ) => {
    return (
      <div className={twMerge("flex flex-col", className)}>
        {label && <Label htmlFor={id ? id : kebabCase(label)}>{label}</Label>}

        <div className="relative w-full">
          {icon && (
            <FontAwesomeIcon icon={icon} className="absolute h-5 pl-3 pt-2.5" />
          )}
          <input
            ref={ref}
            id={id ? id : label ? kebabCase(label) : undefined}
            className={twMerge(
              "h-10 w-full rounded-md bg-brand-secondary px-3 py-2.5 text-white outline-none outline-offset-0 transition-all duration-150 ease-in-out focus:outline-brand-primary",
              icon && "pl-12",
              isError && "outline-red focus:outline-red",
              inputClassName
            )}
            onFocus={(e: React.FocusEvent<HTMLInputElement>) => { 
              if (rest.onFocus) rest.onFocus(e);
              disableHotkeyInput(DomLevels.INPUT)
            }}
            onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
              if (rest.onBlur) rest.onBlur(e);
              enableHotkeyInput(DomLevels.INPUT)
            }}
            {...rest}
          />
          {errorMessage && <H6 className="absolute text-red z-10">{errorMessage}</H6>}
        </div>
      </div>
    );
  },
);

Input.displayName = "Input";