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

const BasicDropdownCode = () => {
  return (
    <>
    <div className="mt-4">
        <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-bodytext 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-bodytext 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-bodytext 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-bodytext 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 className="mt-4">
      <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 className="mt-4">
      <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 className="mt-4">
      <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 className="mt-4">
      <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 className="mt-4">
      <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 className="mt-4">
      <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 className="mt-4">
      <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