sendou.ink/app/components/Input.tsx

import clsx from "clsx";

export function Input({
  name,
  id,
  className,
  minLength,
  maxLength,
  required,
  defaultValue,
  leftAddon,
  icon,
  type,
  min,
  max,
  pattern,
  list,
  testId,
  "aria-label": ariaLabel,
  value,
  placeholder,
  onChange,
}: {
  name?: string;
  id?: string;
  className?: string;
  minLength?: number;
  maxLength?: number;
  required?: boolean;
  defaultValue?: string;
  leftAddon?: string;
  icon?: React.ReactNode;
  type?: "number" | "date";
  min?: number;
  max?: number | string;
  pattern?: string;
  list?: string;
  testId?: string;
  "aria-label"?: string;
  value?: string;
  placeholder?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
}) {
  return (
    <div className={clsx("input-container", className)}>
      {leftAddon ? <div className="input-addon">{leftAddon}</div> : null}
      <input
        name={name}
        id={id}
        minLength={minLength}
        maxLength={maxLength}
        min={min}
        max={max}
        defaultValue={defaultValue}
        pattern={pattern}
        list={list}
        data-testid={testId}
        value={value}
        onChange={onChange}
        aria-label={ariaLabel}
        required={required}
        placeholder={placeholder}
        type={type}
      />
      {icon}
    </div>
  );
}