init push

2026-08-25 20:29:14 +02:00
commit 2bb9aab82c
42 changed files with 3966 additions and 0 deletions
--- a/frontend/src/components/StepList.jsx
+++ b/frontend/src/components/StepList.jsx
@@ -0,0 +1,76 @@
+import { useState } from 'react';
+
+export default function StepList({ steps, editable, onChange }) {
+  const [completed, setCompleted] = useState({});
+
+  const toggle = (i) => setCompleted(prev => ({ ...prev, [i]: !prev[i] }));
+
+  const updateStep = (i, value) => {
+    const updated = steps.map((s, idx) => (idx === i ? value : s));
+    onChange(updated);
+  };
+
+  const addStep = () => onChange([...steps, '']);
+
+  const removeStep = (i) => onChange(steps.filter((_, idx) => idx !== i));
+
+  const moveStep = (i, direction) => {
+    const arr = [...steps];
+    const j = i + direction;
+    if (j < 0 || j >= arr.length) return;
+    [arr[i], arr[j]] = [arr[j], arr[i]];
+    onChange(arr);
+  };
+
+  return (
+    <div>
+      <h3 className="font-semibold text-lg mb-3">Zubereitung</h3>
+      <ol className="space-y-3">
+        {steps.map((step, i) => (
+          <li key={i} className="flex items-start gap-3">
+            {!editable && (
+              <button
+                onClick={() => toggle(i)}
+                className={`mt-1 w-6 h-6 rounded-full border-2 flex-shrink-0 flex items-center justify-center text-xs font-bold transition-colors ${
+                  completed[i]
+                    ? 'bg-blue-600 border-blue-600 text-white'
+                    : 'border-gray-300 text-gray-400'
+                }`}
+              >
+                {completed[i] ? '✓' : i + 1}
+              </button>
+            )}
+            {editable ? (
+              <div className="flex-1 flex gap-2">
+                <span className="mt-2 text-sm font-bold text-gray-400 w-5">{i + 1}.</span>
+                <textarea
+                  value={step}
+                  onChange={e => updateStep(i, e.target.value)}
+                  rows={2}
+                  className="flex-1 px-2 py-1 border border-gray-300 rounded text-sm resize-none"
+                />
+                <div className="flex flex-col gap-1">
+                  <button onClick={() => moveStep(i, -1)} className="text-gray-400 hover:text-gray-600 text-xs">&uarr;</button>
+                  <button onClick={() => moveStep(i, 1)} className="text-gray-400 hover:text-gray-600 text-xs">&darr;</button>
+                  <button onClick={() => removeStep(i)} className="text-red-400 hover:text-red-600 text-xs">&times;</button>
+                </div>
+              </div>
+            ) : (
+              <p className={`${completed[i] ? 'line-through text-gray-400' : ''}`}>
+                {step}
+              </p>
+            )}
+          </li>
+        ))}
+      </ol>
+      {editable && (
+        <button
+          onClick={addStep}
+          className="mt-2 text-sm text-blue-600 hover:text-blue-700 font-medium"
+        >
+          + Schritt hinzufügen
+        </button>
+      )}
+    </div>
+  );
+}