Очистка мусора на реакте

FRONT/DEV/src/components/settings/Test.tsx

@@ -1,87 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-const DraggableList = () => {
-    const [items, setItems] = useState([
-        'Item 1',
-        'Item 2',
-        'Item 3',
-        'Item 4',
-        'Item 5',
-    ]);
-    const [draggingIndex, setDraggingIndex] = useState(null);
-
-    const handleDragStart = (index) => {
-        setDraggingIndex(index);
-    };
-
-    const handleDragOver = (index) => {
-        // Останавливаем стандартное поведение браузера
-        if (index !== draggingIndex) {
-            setItems((prevItems) => {
-                const newItems = [...prevItems];
-                const [movedItem] = newItems.splice(draggingIndex, 1); // Удаляем перетаскиваемый элемент
-                newItems.splice(index, 0, movedItem); // Вставляем его в новое место
-                return newItems;
-            });
-            setDraggingIndex(index); // Обновляем индекс для перетаскивания
-        }
-    };
-
-    const handleDrop = () => {
-        setDraggingIndex(null); // Сбрасываем состояние перетаскивания
-    };
-
-    return (
-        <StyledList>
-            {items.map((item, index) => (
-                <StyledItem
-                    key={index}
-                    className={draggingIndex === index ? 'dragging' : ''}
-                    draggable
-                    onDragStart={() => handleDragStart(index)}
-                    onDragOver={(e) => {
-                        e.preventDefault(); // Останавливаем стандартное поведение
-                        handleDragOver(index);
-                    }}
-                    onDragEnd={handleDrop}
-                >
-                    {item}
-                </StyledItem>
-            ))}
-        </StyledList>
-    );
-};
-
-export default DraggableList;
-
-// Стилизация с помощью styled-components
-
-const StyledList = styled.ul`
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-`;
-
-const StyledItem = styled.li`
-  background-color: #f4f4f9;
-  margin: 8px 0;
-  padding: 16px;
-  border-radius: 4px;
-  cursor: grab;
-  transition: transform 0.2s ease, background-color 0.3s ease;
-  
-  &:active {
-    transform: scale(0.98);
-  }
-
-  &.dragging {
-    background-color: #d0e1f9;
-    transform: scale(1.05);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  }
-
-  &:hover {
-    background-color: #e0e0e0;
-  }
-`;