Как написать код для такого выпадающего списка?

Кирилл Никитин, Не можно!)

Как в react сделать dot-notation?

WbICHA, Нет, не вышло. Пробовал всякими разными способами. Жалко ts нет, сделал бы как в P.S))

Как в react сделать dot-notation?

Lynn «Кофеман», Обновил ответ, спасибо за замечание! Продублирую еще и сюда:

import * as DropDownUi from '@/components/ui/DropDownUi/DropDownUi.jsx'

Как красиво и правильно сделать в компоненте кнопки её вариации?

Не жизни способный вариант. Если у вас 6 кнопок, и наполнение из 4 тегов. То изменять нужно будет в 6 местах, синхронизировать их

Как сделать отступ для scrollbar?

Ankhena,

.wrapper {
  --outer-pd: 4px 8px;
  --inner-pd: 8px 16px;

  padding: var(--outer-pd);

  &__content {
    padding: var(--inner-pd);
  }
}

Добавлю, пусть мой предыдущий комментарий будет тогда максимально полным :)

Как сделать отступ для scrollbar?

Виталий Першин, John Norton Я согласен с этим. Можно обертку сделать:

<div class="wrapper"> <!-- padding -->
  <div class="wrapper__content"></div> <!-- overflow + padding -->
</div>

Но при фокусе на wrapper (отступ справа это уже не элемент со скроллом) скролла не будет. Это не критично, но одна из причин почему не особо люблю так делать

По высоте если захотите поменять отступы, не забывайте что нужно плюсовать padding-top с wrapper + wrapper__content. А то от дизайна отличия будут

Как оптимизировать большое количество строк в таблице?

Спасибо!