import { Fragment, useState } from 'react' import { Listbox, Transition } from '@headlessui/react' import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid'
const people = [ { name: 'Wade Cooper' }, { name: 'Arlene Mccoy' }, { name: 'Devon Webb' }, { name: 'Tom Cook' }, { name: 'Tanya Fox' }, { name: 'Hellen Schmidt' }, ]
export default function Example() { const [selected, setSelected] = useState(people[0])
return (
<Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
{selected.name}
</Listbox.Button>
<Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{people.map((person, personIdx) => (
<Listbox.Option
key={personIdx}
className={({ active }) =>
relative cursor-default select-none py-2 pl-10 pr-4 ${ active ? 'bg-amber-100 text-amber-900' : 'text-gray-900' }
}
value={person}
>
{({ selected }) => (
<>
<span
className={block truncate ${ selected ? 'font-medium' : 'font-normal' }}
>
{person.name}
{selected ? (
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>