pfadi-bussle/components/input.tsx

import React from 'react'

import InputWrapper from './inputWrapper'

type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
  label: string
}

export default function Input(props: InputProps) {
  const { label, name, required, type = 'text', className = "", ...rest } = props

  const defaultClasses = "appearance-none bg-gray-50 text-gray-500 border rounded py-2 px-3 mb-3 leading-tight disabled:bg-gray-200 disabled:cursor-not-allowed focus: outline-none focus:bg-white w-full"
  const classes = `${defaultClasses} ${className}`;

  return (
    <InputWrapper label={label} name={name} required={required}>
      <input
        type={type}
        required={required}
        className={classes}
        id={name}
        name={name}
        {...rest}
      />
    </InputWrapper>
  )
}