ActionsPanel

() => {
  const items = [
    {
      element: (
        <ActionsPanel.Button primary icon="plus-icon">
          Добавить
        </ActionsPanel.Button>
      ),
      menuElement: (
        <ActionsPanel.List
          options={[
            {
              id: 1,
              header: 'Добавить',
              icon: 'plus-icon',
            },
          ]}
        />
      ),
    },
    {
      element: <ActionsPanel.Button>Сделать</ActionsPanel.Button>,
      menuElement: (
        <ActionsPanel.List
          options={[
            {
              id: 1,
              header: 'Сделать',
            },
          ]}
        />
      ),
    },
    {
      element: (
        <ActionsPanel.Button.Group>
          <ActionsPanel.Button icon="play-icon" active>
            Запустить
          </ActionsPanel.Button>
          <ActionsPanel.Button icon="stop-icon">
            Остановить
          </ActionsPanel.Button>
          <ActionsPanel.Button icon="versa-icon">
            Обновить
          </ActionsPanel.Button>
        </ActionsPanel.Button.Group>
      ),
      menuElement: (
        <ActionsPanel.List
          options={[
            {
              id: 1,
              header: 'Запустить',
              icon: 'play-icon',
              selected: true,
            },
            {
              id: 2,
              header: 'Остановить',
              icon: 'versa-icon',
            },
            {
              id: 3,
              header: 'Обновить',
              icon: 'versa-icon',
            },
          ]}
        />
      ),
    },
    {
      element: (
        <Dropdown trigger={<ActionsPanel.Button>Фильтр</ActionsPanel.Button>}>
          <div
            style={{
              border: '2px solid #3B425B',
              borderRadius: '2px',
              minWidth: 186,
              maxWidth: 240,
            }}
          >
            <ActionsPanel.GroupedList
              options={[
                {
                  id: 1,
                  groupName: 'По дате',
                  items: [
                    {
                      id: 1,
                      header: 'За всё время',
                    },
                    {
                      id: 2,
                      header: 'Сегодня',
                    },
                    {
                      id: 3,
                      header: 'Эта неделя',
                    },
                    {
                      id: 4,
                      header: 'Этот месяц',
                    },
                  ],
                },
                {
                  id: 2,
                  groupName: 'По цвету',
                  items: [
                    {
                      id: 1,
                      header: 'Красный',
                    },
                    {
                      id: 2,
                      header: 'Зеленый',
                    },
                    {
                      id: 3,
                      header: 'Синий',
                    },
                  ],
                },
              ]}
            />
          </div>
        </Dropdown>
      ),
      menuElement: (
        <ActionsPanel.GroupedList
          options={[
            {
              id: 1,
              groupName: 'Фильтр, По дате',
              items: [
                {
                  id: 1,
                  header: 'За всё время',
                },
                {
                  id: 2,
                  header: 'Сегодня',
                },
                {
                  id: 3,
                  header: 'Эта неделя',
                },
                {
                  id: 4,
                  header: 'Этот месяц',
                },
              ],
            },
            {
              id: 2,
              groupName: 'Фильтр, По цвету',
              items: [
                {
                  id: 1,
                  header: 'Красный',
                },
                {
                  id: 2,
                  header: 'Зеленый',
                },
                {
                  id: 3,
                  header: 'Синий',
                },
              ],
            },
          ]}
        />
      ),
    },
    {
      element: (
        <ActionsPanel.Button icon="export-icon">Экспорт</ActionsPanel.Button>
      ),
      menuElement: (
        <ActionsPanel.List
          options={[
            {
              id: 1,
              header: 'Экспорт',
              icon: 'export-icon',
            },
          ]}
        />
      ),
    },
    {
      element: (
        <ActionsPanel.Button icon="delete-icon">Удалить</ActionsPanel.Button>
      ),
      menuElement: (
        <ActionsPanel.List
          options={[
            {
              id: 1,
              header: 'Удалить',
              icon: 'delete-icon',
            },
          ]}
        />
      ),
    },
  ]
  return <ActionsPanel items={items} />
}