Untitled

import { Fragment } from 'react'
import { useField, useFormikContext } from 'formik'
import { Listbox, Transition } from '@headlessui/react'
import { CheckIcon, ChevronDownIcon } from '@heroicons/react/solid'

export default function ListBox({
  options,
  value,
  label,
  placeholder,
  className,
  error,
  ...props
}) {
  const { setFieldValue } = useFormikContext()
  const [field] = useField(props)
  return (
    <Listbox
      as="div"
      {...field}
      {...props}
      value={field.value}
      onChange={(val) => {
        setFieldValue(field.name, val, true)
      }}
    >
      <div className="relative">
        <Listbox.Label className="label" htmlFor={label}>
          {label}
        </Listbox.Label>
        <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white form-control">
          <span className="block truncate">{selected.option}</span>
          <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
            <ChevronDownIcon
              className="w-5 h-5 text-gray-400"
              aria-hidden="true"
            />
          </span>
        </Listbox.Button>
        <Transition
          as={Fragment}
          leave="transition ease-in duration-100"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <Listbox.Options className="absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
            {data.map((item, index) => (
              <Listbox.Option
                key={index}
                className={({ active }) =>
                  `${active ? 'text-indigo-900 bg-indigo-100' : 'text-gray-900'}
                              cursor-default select-none relative py-2 pl-10 pr-4`
                }
                value={item}
              >
                {({ selected, active }) => (
                  <>
                    <span
                      className={`${
                        selected ? 'font-medium' : 'font-normal'
                      } block truncate`}
                    >
                      {item.option}
                    </span>
                    {selected ? (
                      <span
                        className={`${
                          active ? 'text-indigo-600' : 'text-indigo-600'
                        }
                                    absolute inset-y-0 left-0 flex items-center pl-3`}
                      >
                        <CheckIcon className="w-5 h-5" aria-hidden="true" />
                      </span>
                    ) : null}
                  </>
                )}
              </Listbox.Option>
            ))}
          </Listbox.Options>
        </Transition>
      </div>
    </Listbox>
  )
}