ドロップダウン（アクションメニュー）

'use client';
import { MantineProvider, Menu, Button } from '@mantine/core';
import '@mantine/core/styles.css';

export function MantineDropdownDemo() {
  return (
    <MantineProvider>
      <div className="flex gap-4 flex-wrap">
        {/* アクションメニュー */}
        <Menu>
          <Menu.Target>
            <Button variant="default">操作メニュー ▾</Button>
          </Menu.Target>
          <Menu.Dropdown>
            <Menu.Label>ファイル操作</Menu.Label>
            <Menu.Item>📄 新規作成</Menu.Item>
            <Menu.Item>💾 保存</Menu.Item>
            <Menu.Divider />
            <Menu.Item color="red">🗑️ 削除</Menu.Item>
          </Menu.Dropdown>
        </Menu>

        {/* アイコンボタン型 */}
        <Menu>
          <Menu.Target>
            <Button variant="outline" color="gray">⋮ 詳細</Button>
          </Menu.Target>
          <Menu.Dropdown>
            <Menu.Item>✏️ 編集</Menu.Item>
            <Menu.Item>📋 複製</Menu.Item>
            <Menu.Item color="red">🗑️ 削除</Menu.Item>
          </Menu.Dropdown>
        </Menu>
      </div>
    </MantineProvider>
  );
}