Javascript: Пагинация

Частая задача, если данных очень много, показывать их частями, так как контента может быть слишком много. Обычно для этого используется постраничный вывод(пагинация) с возможностью переключения страниц и выбором количества элементов на странице. В этом упражнении вам надо добавить пагинацию для списка задач.

src/components/Tasks.jsx

Добавьте получение списка задач для текущей страницы через селектор. Добавьте к списку задач aria-label="Список задач"

Добавьте выбор количества задач на странице: 5, 10, 20 или 50 задач на страницу. Используйте для этого селектор, добавьте к нему aria-label="Размер страницы"

Изменение количества задач на странице должно приводить к открытию первой страницы.

Добавьте кнопки для переключения страниц.

Пример страницы:

<div id="container" class="container m-3">
  <div class="col-5">
    <form action="" class="form-inline">
      <div class="form-group mx-sm-3">
        <input type="text" data-testid="input" required="" value="" />
      </div>
      <input
        type="submit"
        data-testid="submit"
        class="btn btn-primary btn-sm"
        value="Add"
      />
    </form>
    <div class="mt-3">
      <ul class="list-group" aria-label="Список задач">
        <li class="list-group-item d-flex">
          <span class="mr-auto">Задача № 1</span
          ><button type="button" class="close"><span>×</span></button>
        </li>
        <li class="list-group-item d-flex">
          <span class="mr-auto">Задача № 2</span
          ><button type="button" class="close"><span>×</span></button>
        </li>
        <li class="list-group-item d-flex">
          <span class="mr-auto">Задача № 3</span
          ><button type="button" class="close"><span>×</span></button>
        </li>
        <li class="list-group-item d-flex">
          <span class="mr-auto">Задача № 4</span
          ><button type="button" class="close"><span>×</span></button>
        </li>
        <li class="list-group-item d-flex">
          <span class="mr-auto">Задача № 5</span
          ><button type="button" class="close"><span>×</span></button>
        </li>
      </ul>
      <div class="mt-3">
        <span>Показывать по </span
        ><select
          aria-label="Размер страницы"
          class="form-select form-select-lg"
        >
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="50">50</option>
        </select>
      </div>
      <ul class="mt-3 pagination">
        <li class="page-item active"><span class="page-link">1</span></li>
        <li class="page-item">
          <a class="page-link" role="button" tabindex="0">2</a>
        </li>
        <li class="page-item">
          <a class="page-link" role="button" tabindex="0">3</a>
        </li>
        <li class="page-item">
          <a class="page-link" role="button" tabindex="0">4</a>
        </li>
        <li class="page-item">
          <a class="page-link" role="button" tabindex="0">5</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Подсказки

• Для формирования кнопок страниц можно воспользоваться компонентом из bootstrap Pagination
• При создании задачи, сервер сгенерирует id и вернёт объект с присвоенным идентификатором
• При удалении последнего элемента на странице, должен быть переход на предыдущую страницу