import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
import { Icon } from '@iconify/react'

const BasicDropdownCode = () => {
  return (
    <div>
      <Menu>
        <MenuButton className='ui-button bg-primary gap-2'>
          Options
          <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='bottom'
          className='ui-dropdown ui-dropdown-animation'>
          <MenuItem>
            <button className='ui-dropdown-item group'>
              <Icon icon='solar:pen-new-square-outline' height={18} />
              Edit
              <kbd className='ms-auto hidden text-xs text-darklink group-data-[focus]:inline '>
                ⌘ E
              </kbd>
            </button>
          </MenuItem>
          <MenuItem>
            <button className='ui-dropdown-item group '>
              <Icon icon='solar:copy-outline' height={18} />
              Duplicate
              <kbd className='ms-auto hidden text-xs text-darklink group-data-[focus]:inline'>
                ⌘ D
              </kbd>
            </button>
          </MenuItem>
          <MenuItem>
            <button className='ui-dropdown-item group '>
              <Icon icon='solar:archive-check-broken' height={18} />
              Archive
              <kbd className='ms-auto hidden text-xs text-darklink group-data-[focus]:inline'>
                ⌘ A
              </kbd>
            </button>
          </MenuItem>
          <MenuItem>
            <button className='ui-dropdown-item group '>
              <Icon icon='solar:trash-bin-minimalistic-2-outline' height={18} />
              Delete
              <kbd className='ms-auto hidden text-xs text-darklink group-data-[focus]:inline'>
                ⌘ D
              </kbd>
            </button>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default BasicDropdownCode

import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'
import { Icon } from '@iconify/react'

const LinkDropdownCode = () => {
  return (
    <div>
      <Menu>
        <MenuButton className='ui-button bg-secondary gap-2'>
          My Account <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='bottom'
          className='ui-dropdown ui-dropdown-animation'>
          <MenuItem>
            <a className='ui-dropdown-item' href='/settings'>
              Settings
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/support'>
              Support
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/license'>
              License
            </a>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default LinkDropdownCode

import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'
import { Icon } from '@iconify/react'

const ButtonActionCode = () => {
  function showSettingsDialog() {
    alert('Open settings dialog!')
  }
  function showSupportDialog() {
    alert('Open Support dialog!')
  }
  function showLogoutDialog() {
    alert('Open Logout dialog!')
  }

  return (
    <div>
      <Menu>
        <MenuButton className='ui-button bg-success gap-2'>
          My Action <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='bottom'
          className='ui-dropdown ui-dropdown-animation'>
          <MenuItem>
            <button onClick={showSettingsDialog} className='ui-dropdown-item'>
              Settings
            </button>
          </MenuItem>
          <MenuItem>
            <button onClick={showSupportDialog} className='ui-dropdown-item'>
              Support
            </button>
          </MenuItem>
          <MenuItem>
            <button onClick={showLogoutDialog} className='ui-dropdown-item'>
              Logout
            </button>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default ButtonActionCode

import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'
import { Icon } from '@iconify/react/dist/iconify.js'

const DisableItemCode = () => {
  return (
    <div>
      <Menu>
        <MenuButton className='ui-button bg-error gap-2'>
          My Profile <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='bottom'
          className='ui-dropdown ui-dropdown-animation'>
          <MenuItem>
            <a className='ui-dropdown-item' href='/settings'>
              Settings
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/support'>
              Support
            </a>
          </MenuItem>
          <MenuItem disabled>
            <a
              className='ui-dropdown-item data-[disabled]:opacity-50'
              href='/license'>
              License
            </a>
          </MenuItem>
          <MenuItem disabled>
            <a
              className='ui-dropdown-item data-[disabled]:opacity-50'
              href='/logout'>
              Logout
            </a>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default DisableItemCode

import {
  Menu,
  MenuButton,
  MenuItems,
  MenuItem,
  MenuSeparator,
} from '@headlessui/react'
import { Icon } from '@iconify/react'

const SepratingItemsCode = () => {
  return (
    <div>
      <Menu>
        <MenuButton className='ui-button bg-warning gap-2'>
          My Account <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='bottom'
          className='ui-dropdown ui-dropdown-animation'>
          <MenuItem>
            <a className='ui-dropdown-item' href='/settings'>
              Settings
            </a>
          </MenuItem>
          <MenuSeparator className='my-1 h-px bg-border dark:bg-darkborder' />
          <MenuItem>
            <a className='ui-dropdown-item' href='/support'>
              Support
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/license'>
              License
            </a>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default SepratingItemsCode

import {
  Menu,
  MenuButton,
  MenuItems,
  MenuSection,
  MenuHeading,
  MenuItem,
  MenuSeparator,
} from '@headlessui/react'
import { Icon } from '@iconify/react'

const GroupItemCode = () => {
  return (
    <div>
      <Menu>
        <MenuButton className='ui-button bg-info gap-2'>
          My Groups
          <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='bottom'
          className='ui-dropdown ui-dropdown-animation'>
          <MenuSection>
            <MenuHeading className='text-ld text-sm font-semibold px-4 py-1'>
              Settings
            </MenuHeading>
            <MenuItem>
              <a className='ui-dropdown-item' href='/profile'>
                My profile
              </a>
            </MenuItem>
            <MenuItem>
              <a className='ui-dropdown-item' href='/notifications'>
                Notifications
              </a>
            </MenuItem>
          </MenuSection>
          <MenuSeparator className='my-1 h-px bg-border dark:bg-darkborder' />
          <MenuSection>
            <MenuHeading className='text-ld text-sm font-semibold px-4 py-1'>
              Support
            </MenuHeading>
            <MenuItem>
              <a className='ui-dropdown-item' href='/support'>
                Documentation
              </a>
            </MenuItem>
            <MenuItem>
              <a className='ui-dropdown-item' href='/license'>
                License
              </a>
            </MenuItem>
          </MenuSection>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default GroupItemCode

import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
import { Icon } from "@iconify/react/dist/iconify.js";

const DropdownPositionCode = () => {
  return (
    <div>
      <Menu>
        <MenuButton className='ui-button bg-secondary gap-2'>
          My Account <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='top start'
          className='ui-dropdown ui-dropdown-animation'>
          <MenuItem>
            <a className='ui-dropdown-item' href='/settings'>
              Settings
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/support'>
              Support
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/license'>
              License
            </a>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default DropdownPositionCode

import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'
import { Icon } from '@iconify/react'

const DropdwonWidthCode = () => {
  return (
    <div>
      <Menu>
        <MenuButton className='ui-button  bg-primary gap-2'>
          My Account <Icon icon='solar:alt-arrow-down-outline' height={18} />
        </MenuButton>
        <MenuItems
          transition
          anchor='bottom'
          className='ui-dropdown ui-dropdown-animation !w-80 !max-w-80'>
          <MenuItem>
            <a className='ui-dropdown-item' href='/settings'>
              Settings
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/support'>
              Support
            </a>
          </MenuItem>
          <MenuItem>
            <a className='ui-dropdown-item' href='/license'>
              License
            </a>
          </MenuItem>
        </MenuItems>
      </Menu>
    </div>
  )
}

export default DropdwonWidthCode