#Dropdown

import type { DropdownItem } from '@ifhover/leaf-ui';

import { Button, Dropdown, useMessage } from '@ifhover/leaf-ui';

import { ChevronDown, Copy, Pencil, Trash2 } from 'lucide-react';

const items: DropdownItem[] = [
  { key: 'edit', label: 'Edit', icon: <Pencil size={15} /> },
  { key: 'copy', label: 'Copy', icon: <Copy size={15} /> },
  { key: 'archive', label: 'Archive', disabled: true },
  { key: 'divider', type: 'divider' },
  { key: 'delete', label: 'Delete', icon: <Trash2 size={15} />, danger: true },
];

export function DropdownBasic() {
  const { message } = useMessage();
  return (
    <Dropdown items={items} onSelect={(key) => message.info(key)}>
      <Button variant="outline" endIcon={<ChevronDown size={16} />}>
        More actions
      </Button>
    </Dropdown>
  );
}

import { Button, Dropdown } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function ExtensionDemo() {
  const [checked, setChecked] = useState(true);
  const [view, setView] = useState('list');
  return (
    <Dropdown
      items={[
        {
          key: 'group',
          label: 'View',
          type: 'group',
          children: [
            {
              key: 'list',
              label: 'List',
              type: 'radio',
              group: 'view',
              checked: view === 'list',
              onCheckedChange: () => setView('list'),
            },
            {
              key: 'grid',
              label: 'Grid',
              type: 'radio',
              group: 'view',
              checked: view === 'grid',
              onCheckedChange: () => setView('grid'),
            },
          ],
        },
        { key: 'line', type: 'divider' },
        {
          key: 'detail',
          label: 'Show details',
          type: 'checkbox',
          checked,
          onCheckedChange: setChecked,
        },
        {
          key: 'more',
          label: 'More actions',
          children: [
            { key: 'copy', label: 'Copy' },
            { key: 'archive', label: 'Archive' },
          ],
        },
      ]}
    >
      <Button variant="outline">Views and actions</Button>
    </Dropdown>
  );
}

import { Button, Dropdown, Space } from '@ifhover/leaf-ui';

const items = [
  { key: 'edit', label: 'Edit' },
  { key: 'more', label: 'More', children: [{ key: 'archive', label: 'Archive' }] },
];

export function Capabilities() {
  return (
    <Space>
      <Dropdown trigger="hover" items={items}>
        <Button variant="outline">{'Hover to open'}</Button>
      </Dropdown>
      <Dropdown trigger="contextMenu" items={items}>
        <Button variant="outline">{'Right-click here'}</Button>
      </Dropdown>
    </Space>
  );
}