crap

src/components/test.tsx

@@ -0,0 +1,64 @@
+import cx from 'clsx';
+import {Text} from '@mantine/core';
+import {useListState} from '@mantine/hooks';
+import {DragDropContext, Droppable, Draggable} from '@hello-pangea/dnd';
+import classes from './DndList.module.css';
+
+
+const data = [
+    {position: 6, mass: 12.011, symbol: 'C', name: 'Carbon'},
+    {position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen'},
+    {position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium'},
+    {position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium'},
+    {position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium'},
+];
+
+export function DndList() {
+    const [state, handlers] = useListState(data);
+
+    const items = (listIndex: number) => state.map((item, index) => (
+        <Draggable key={item.symbol + `${listIndex}`} index={index} draggableId={item.symbol + `${listIndex}`}>
+            {(provided, snapshot) => (
+                <div
+                    className={cx(classes.item, {[classes.itemDragging]: snapshot.isDragging})}
+                    {...provided.draggableProps}
+                    {...provided.dragHandleProps}
+                    ref={provided.innerRef}
+                >
+                    <Text className={classes.symbol}>{item.symbol}</Text>
+                    <div>
+                        <Text>{item.name}</Text>
+                        <Text c="dimmed" size="sm">
+                            Position: {item.position} • Mass: {item.mass}
+                        </Text>
+                    </div>
+                </div>
+            )}
+        </Draggable>
+    ));
+
+    return (
+        <DragDropContext
+            onDragEnd={({destination, source}) =>
+                handlers.reorder({from: source.index, to: destination?.index || 0})
+            }
+        >
+            <Droppable droppableId="dnd-list" direction="vertical">
+                {(provided) => (
+                    <div {...provided.droppableProps} ref={provided.innerRef}>
+                        {items(1)}
+                        {provided.placeholder}
+                    </div>
+                )}
+            </Droppable>
+            <Droppable droppableId="dnd-list-2" direction="vertical">
+                {(provided) => (
+                    <div {...provided.droppableProps} ref={provided.innerRef}>
+                        {items(2)}
+                        {provided.placeholder}
+                    </div>
+                )}
+            </Droppable>
+        </DragDropContext>
+    );
+}