Задача: вам нужно сделать drag-and-drop конструктор, с помощью которого можно собрать калькулятор

Что нужно сделать?

Нужно написать SPA приложение на React'e и выложить его на github.

Интерфейс, который должен получиться:

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FpdYzuOkvXY3Q00YRAMsLuz%2FCalculator-Constructor%3Fnode-id%3D1%253A2

https://www.figma.com/file/pdYzuOkvXY3Q00YRAMsLuz/Calculator-Constructor

Правая часть экрана - холст

На холст можно бросать компоненты из палитры. Все элементы, брошенные на холст, располагаются вертикально.

При перетаскивании должна подсветиться зона, куда вставится элемент

Элемент удаляется с холста по dblclick

Сайдбар с набором компонентов. Их всего 4:

• дисплей (на холсте он может находиться только в самом верху),
• цифровой блок с кнопками от 0 до 9 и , (дробь)
• кнопки операций: x, /, +, -
• и отдельно кнопка =

Все компоненты одинаковой ширины.

Каждый элемент можно бросить на холст только один раз, затем они становятся неактивными (визуально - opacity 50%).

Переключатель между режимом конструктора и runtime

• в режиме конструктора можно собирать интерфейс, но при нажатии на кнопки, они ничего не делают.