import {
  Listbox,
  ListboxButton,
  ListboxOption,
  ListboxOptions,
} from "@headlessui/react";
import { useState } from "react";
import { Icon } from "@iconify/react";

const people = [
  { id: 1, name: "Durward Reynolds" },
  { id: 2, name: "Kenton Towne" },
  { id: 3, name: "Therese Wunsch" },
  { id: 4, name: "Benedict Kessler" },
  { id: 5, name: "Katelyn Rohan" },
];

const BasicListCode = () => {
  const [selectedPerson, setSelectedPerson] = useState(people[0])

  return (
    <div>
      <Listbox value={selectedPerson} onChange={setSelectedPerson}>
        <ListboxButton className='ui-button bg-primary justify-between items-center gap-3'>
          {selectedPerson.name}{' '}
          <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </ListboxButton>
        <ListboxOptions anchor='bottom' className='ui-dropdown '>
          {people.map((person) => (
            <ListboxOption
              key={person.id}
              value={person}
              className='ui-dropdown-item'>
              {person.name}
            </ListboxOption>
          ))}
        </ListboxOptions>
      </Listbox>
    </div>
  )
}

export default BasicListCode

import { useState } from 'react'
import { Icon } from '@iconify/react'
import {
  Field,
  Label,
  Listbox,
  ListboxButton,
  ListboxOption,
  ListboxOptions,
} from '@headlessui/react'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]

const LabelWithListcode = () => {
  const [selectedPerson, setSelectedPerson] = useState(people[0])

  return (
    <div>
      <Field className='flex gap-3 items-center w-fit'>
        <Label className='block text-ld font-medium'>Assignee:</Label>
        <Listbox value={selectedPerson} onChange={setSelectedPerson}>
          <ListboxButton className='ui-button bg-secondary justify-between items-center gap-3 w-full'>
            {selectedPerson.name}{' '}
            <Icon icon='solar:alt-arrow-down-outline' height={18} />
          </ListboxButton>
          <ListboxOptions anchor='bottom' className='ui-dropdown'>
            {people.map((person) => (
              <ListboxOption
                key={person.id}
                value={person}
                className='ui-dropdown-item'>
                {person.name}
              </ListboxOption>
            ))}
          </ListboxOptions>
        </Listbox>
      </Field>
    </div>
  )
}

export default LabelWithListcode

import { useState } from 'react'
import { Icon } from '@iconify/react'
import {
  Field,
  Listbox,
  ListboxButton,
  ListboxOption,
  ListboxOptions,
} from '@headlessui/react'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]

const DisableListboxCode = () => {
  const [selectedPerson, setSelectedPerson] = useState(people[0])

  return (
    <div>
      <div>
        <Field className='flex gap-3 items-center w-fit' disabled>
          <Listbox value={selectedPerson} onChange={setSelectedPerson}>
            <ListboxButton className='ui-button bg-slate-500 justify-between items-center gap-3 w-full'>
              {selectedPerson.name}{' '}
              <Icon icon='solar:alt-arrow-down-outline' height={18} />
            </ListboxButton>
            <ListboxOptions anchor='bottom' className='ui-dropdown'>
              {people.map((person) => (
                <ListboxOption
                  key={person.id}
                  value={person}
                  className='ui-dropdown-item'>
                  {person.name}
                </ListboxOption>
              ))}
            </ListboxOptions>
          </Listbox>
        </Field>
      </div>
    </div>
  )
}

export default DisableListboxCode

import { useState } from 'react'
import { Icon } from '@iconify/react'
import {
  Description,
  Field,
  Label,
  Listbox,
  ListboxButton,
  ListboxOption,
  ListboxOptions,
} from '@headlessui/react'

const people = [
  { id: 1, name: 'Durward Reynolds', available: true },
  { id: 2, name: 'Kenton Towne', available: true },
  { id: 3, name: 'Therese Wunsch', available: false },
  { id: 4, name: 'Benedict Kessler', available: false },
  { id: 5, name: 'Katelyn Rohan', available: true },
]

const DisableListboxOptionCode = () => {
  const [selectedPerson, setSelectedPerson] = useState(people[0])

  return (
    <div>
      <Field className='w-fit'>
        <Label className='text-sm mb-1 text-ld'>Assignee:</Label>
        <Description className='text-xs mb-2'>
          This person will have full access to this project.
        </Description>
        <Listbox value={selectedPerson} onChange={setSelectedPerson}>
          <ListboxButton className='ui-button bg-success  justify-between items-center gap-3 w-full'>
            {selectedPerson.name}{' '}
            <Icon icon='solar:alt-arrow-down-outline' height={18} />
          </ListboxButton>
          <ListboxOptions anchor='bottom' className='ui-dropdown'>
            {people.map((person) => (
              <ListboxOption
                key={person.id}
                value={person}
                className='ui-dropdown-item data-[disabled]:opacity-50 data-[disabled]:hover:text-darklink'
                disabled={!person.available}>
                {person.name}
              </ListboxOption>
            ))}
          </ListboxOptions>
        </Listbox>
      </Field>
    </div>
  )
}

export default DisableListboxOptionCode

import { useState } from 'react'
import { Icon } from '@iconify/react'
import {
  Description,
  Field,
  Label,
  Listbox,
  ListboxButton,
  ListboxOption,
  ListboxOptions,
} from '@headlessui/react'

const people = [
  { id: 1, name: 'Durward Reynolds', available: true },
  { id: 2, name: 'Kenton Towne', available: true },
  { id: 3, name: 'Therese Wunsch', available: false },
  { id: 4, name: 'Benedict Kessler', available: false },
  { id: 5, name: 'Katelyn Rohan', available: true },
]

const ListDescCode = () => {
  const [selectedPerson, setSelectedPerson] = useState(people[0])

  return (
    <div>
      <Field className='w-fit'>
        <Description className='text-xs mb-2'>
          This person will have full access to this project. This person will
          have full access to this project.
        </Description>
        <Listbox value={selectedPerson} onChange={setSelectedPerson}>
          <ListboxButton className='ui-button bg-warning  justify-between items-center gap-3 w-full'>
            {selectedPerson.name}{' '}
            <Icon icon='solar:alt-arrow-down-outline' height={18} />
          </ListboxButton>
          <ListboxOptions anchor='bottom' className='ui-dropdown'>
            {people.map((person) => (
              <ListboxOption
                key={person.id}
                value={person}
                className='ui-dropdown-item'>
                {person.name}
              </ListboxOption>
            ))}
          </ListboxOptions>
        </Listbox>
      </Field>
    </div>
  )
}

export default ListDescCode

import { useState } from 'react'
import { Icon } from '@iconify/react'
import {
  Description,
  Field,
  Label,
  Listbox,
  ListboxButton,
  ListboxOption,
  ListboxOptions,
} from '@headlessui/react'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]

const ListBoxWithHtmlCode = () => {
  const [selectedPerson, setSelectedPerson] = useState(people[0])

  return (
    <div>
      <form action='/projects/1' method='post ' className='flex gap-3 w-fit'>
        <Field className='w-full'>
          <Label className='text-sm mb-1 text-ld'>Assignee:</Label>
          <Description className='text-xs mb-2'>
            This person will have full access to this project.
          </Description>
          <Listbox
            name='assignee'
            value={selectedPerson}
            onChange={setSelectedPerson}>
            <span className='flex gap-3'>
              <ListboxButton className='ui-button bg-primary  justify-between items-center gap-3 w-full'>
                {selectedPerson.name}{' '}
                <Icon icon='solar:alt-arrow-down-outline' height={18} />
              </ListboxButton>
              <button className='ui-button bg-secondary'>Submit</button>
            </span>
            <ListboxOptions anchor='bottom' className='ui-dropdown'>
              {people.map((person) => (
                <ListboxOption
                  key={person.id}
                  value={person}
                  className='ui-dropdown-item'>
                  {person.name}
                </ListboxOption>
              ))}
            </ListboxOptions>
          </Listbox>
        </Field>
      </form>
    </div>
  )
}

export default ListBoxWithHtmlCode