Allergene/Zusatzstoffe je Gericht auswählbar, klein angezeigt

Chip-Auswahl im Gericht-Formular (Klick zum An-/Abwählen) statt Checkbox-Liste; Kürzel erscheinen hochgestellt neben dem Gerichtnamen in Speisekarte, mobiler Ansicht und Wochenplan-Editor. Editor bekommt außerdem einen Heute-Button.
2026-07-18 00:46:39 +02:00
parent 1db89a54bf
commit 675503e1f4
4 changed files with 202 additions and 52 deletions
@@ -0,0 +1,42 @@
+"use client";
+
+import type { CodeItem } from "@/lib/types";
+
+export default function ChipPicker({
+  items,
+  selected,
+  onToggle,
+  label,
+}: {
+  items: CodeItem[];
+  selected: string[];
+  onToggle: (code: string) => void;
+  label: string;
+}) {
+  return (
+    <div>
+      <label className="label">{label}</label>
+      {items.length === 0 ? (
+        <p className="text-sm text-gray-400">Keine Einträge vorhanden.</p>
+      ) : (
+        <div className="flex flex-wrap gap-1.5">
+          {items.map((item) => {
+            const active = selected.includes(item.code);
+            return (
+              <button
+                key={item.code}
+                type="button"
+                onClick={() => onToggle(item.code)}
+                className={`chip ${active ? "chip-active" : ""}`}
+                aria-pressed={active}
+                title={item.name}
+              >
+                <span className="font-semibold">{item.code}</span> {item.name}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}