comicbox/components/TextInput.tsx

import {
    DetailedHTMLProps,
    InputHTMLAttributes,
    TextareaHTMLAttributes,
} from 'react';

type Props =
    | ({ multiline: true } & DetailedHTMLProps<
          TextareaHTMLAttributes<HTMLTextAreaElement>,
          HTMLTextAreaElement
      >)
    | ({ multiline: false | undefined } & DetailedHTMLProps<
          InputHTMLAttributes<HTMLInputElement>,
          HTMLInputElement
      >);

export default function TextInput({ multiline, className, ...props }: Props) {
    if (multiline) {
        return (
            <textarea
                className={
                    'bg-slate-600 p-1 overflow-auto rounded ' + className
                }
                {...(props as any)}
            />
        );
    } else {
        return (
            <input
                className={
                    'bg-slate-600 p-1 overflow-auto rounded ' + className
                }
                {...(props as any)}
            />
        );
    }
}