React implementation of TailwindUI Buttons

Input.tsx

import { ExclamationCircle } from "heroicons-react";
import { InputHTMLAttributes } from "react";

import { toKebabCase } from "utils/string/toKebabCase";

type InputProps = {
  hint?: string;
  hideLabel?: boolean;
  label: string;
  error?: string;
  help?: string;
} & InputHTMLAttributes<HTMLInputElement>;

export const Input = ({
  className,
  hint,
  id,
  hideLabel,
  label,
  error,
  type,
  placeholder,
  onChange,
  value,
  help,
}: InputProps) => (
  <div className={className}>
    <div className={hint && "flex justify-between"}>
      <label
        htmlFor={id}
        className={`block text-sm font-medium leading-5 text-gray-700 ${
          hideLabel && "sr-only"
        }`}
      >
        {label}
      </label>