Component for mobile instruction step editor's list item

frontend/src/components/recipes/InstructionStepMobileListItem.tsx

@@ -0,0 +1,69 @@
+import Button from "../basics/Button.tsx";
+import {ArrowDown, ArrowUp, X} from "lucide-react";
+import {ButtonType} from "../basics/BasicButtonDefinitions.ts";
+import type {InstructionStepModel} from "../../models/InstructionStepModel.ts";
+
+type InstructionStepMobileListItemProps = {
+    index: number;
+    step: InstructionStepModel;
+    onMove(index: number, direction: "up" | "down"): void;
+    onUpdate: (index: number, value: string) => void;
+    onRemove: (index: number) => void;
+    isFirst: boolean;
+    isLast: boolean;
+};
+
+export function InstructionStepMobileListItem({
+                                                  index,
+                                                  step,
+                                                  onMove,
+                                                  onUpdate,
+                                                  onRemove,
+                                                  isFirst,
+                                                  isLast
+                                              }: InstructionStepMobileListItemProps) {
+    return (
+        <div
+            key={step.id}
+            className="flex items-start gap-3 bg-gray-50 rounded-xl p-3 shadow-sm"
+        >
+            <div className="flex flex-col items-center pt-1">
+                <div className="circular-container">
+                    {index + 1}
+                </div>
+                <div className="flex flex-col mt-2">
+                    <Button
+                        icon={ArrowUp}
+                        onClick={() => onMove(index, "up")}
+                        buttonType={ButtonType.TransparentButton}
+                        disabled={isFirst} // disable if first item
+                    />
+                    <Button
+                        icon={ArrowDown}
+                        onClick={() => onMove(index, "down")}
+                        buttonType={ButtonType.TransparentButton}
+                        disabled={isLast} // disable if last item
+                    />
+                </div>
+            </div>
+
+            <textarea
+                className="input-field w-full min-h-[120px] resize-none overflow-hidden"
+                placeholder={`Schritt ${index + 1}`}
+                value={step.text}
+                onChange={(e) => onUpdate(index, e.target.value)}
+                onInput={(e) => {
+                    const el = e.target as HTMLTextAreaElement;
+                    el.style.height = "auto";
+                    el.style.height = `${el.scrollHeight}px`;
+                }}
+            />
+
+            <Button
+                onClick={() => onRemove(index)}
+                icon={X}
+                buttonType={ButtonType.DarkButton}
+            />
+        </div>
+    );
+}