Add control for moving items up and down a list.

frontend/src/components/basics/MoveButtonControl.tsx

@@ -0,0 +1,36 @@
+import Button from "./Button.tsx";
+import {ArrowDown, ArrowUp} from "lucide-react";
+import {ButtonType} from "./BasicButtonDefinitions.ts";
+
+type MoveButtonControlProps = {
+    isUpDisabled: boolean;
+    isDownDisabled: boolean;
+    onMoveUp(): void;
+    onMoveDown(): void;
+}
+
+/**
+ * Up and down buttons for reordering list items when not using drag & drop, e.g., on mobile devices.
+ * @param isUpDisabled Indicates whether the up button is enabled
+ * @param isDownDisabled Indicates whether the down button is enabled
+ * @param onMoveUp Method to call when move up is clicked
+ * @param onMoveDown Method to call when move down is clicked
+ */
+export function MoveButtonControl({isUpDisabled, isDownDisabled, onMoveUp, onMoveDown}: MoveButtonControlProps) {
+    return (
+        <div className="flex flex-col mt-2">
+            <Button
+                icon={ArrowUp}
+                onClick={() => onMoveUp()}
+                buttonType={ButtonType.TransparentButton}
+                disabled={isUpDisabled} // disable if first item
+            />
+            <Button
+                icon={ArrowDown}
+                onClick={() => onMoveDown()}
+                buttonType={ButtonType.TransparentButton}
+                disabled={isDownDisabled}
+            />
+        </div>
+    );
+}