Form Components

Input Field

interface InputProps {
  htmlFor: string;
  label: string;
  name: string;
  text: string;
}

export const InputField: React.FC<InputProps> = ({ label, htmlFor, name, type = 'text' }) => {
  return (
    <div>
      <label htmlFor={htmlFor} className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">{label}</label>
      <input type={type} id={htmlFor} name={name} className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light" required />
    </div>
  )
}

Select Field

interface SelectInputProps {
  htmlFor: string;
  label: string;
  name: string;
  defaultText: string;
  options: string[];
}

export const SelectInput: React.FC<SelectInputProps> = ({ htmlFor, label, name, defaultText, options }) => {
  return (
    <div>
      <label
        htmlFor={htmlFor}
        className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
      >
        {label}
      </label>
      <select
        id={htmlFor}
        name={name}
        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 appearance-none"
        required
      >
        <option disabled selected>{defaultText}</option>
        {options.map((option, index) => (
          <option key={index} value={option}>
            {option}
          </option>
        ))}
      </select>
    </div>
  );
};

Text Area Field

interface TextAreaProps {
  htmlFor: string;
  label: string;
  name: string;
}

export const TextArea: React.FC<TextAreaProps> = ({ htmlFor, label, name }) => {
  return (
    <div className="sm:col-span-2">
        <label htmlFor={htmlFor} className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">{label}</label>
        <textarea id={htmlFor} name={name} rows={6} className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"></textarea>
      </div>
  );
};

Button

interface ButtonProps {
  type?: 'button' | 'submit' | 'reset';
  buttonState?: true | false;
  onClick?: () => void;
  children: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({ type = 'button', onClick, children, buttonState}) => {
  return (
    <button
      type={type}
      onClick={onClick}
      disabled={buttonState}
      className="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-primary-700 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
    >
      {children}
    </button>
  );
};