pfadi-bussle/components/inputWrapper.tsx

import React from 'react'
import Required from './required'

export default function Input(props: {
  label: string
  name?: string
  required: boolean
  children: React.ReactNode
}) {
  const { label, name, required, children } = props

  return (
    <>
      <div className="flex flex-wrap -mx-3 mb-2">
        <div className="w-full px-3 mb-2">
          <label
            className="block uppercase tracking-wide text-gray-500 text-xs font-bold mb-2"
            htmlFor={name}
          >
            {label} {required && <Required />}
          </label>
          {children}
        </div>
      </div>
    </>
  )
}